vue3嵌套路由

一.创建模板路由模板，（注：父页面可不跟参数，也可跟参数）

  { path: '/User/:id(\\d+)', component: () => import ('../components/User.vue')  ,children:[

    {

      path:'heng',

      component: () => import ('../components/heng.vue')

    }, {

      path:'shu',

      component: () => import ('../components/shu.vue')

    }

  ]},

二、父页面使用     <router-view></router-view>即可子页面和父页面的一块显示

---

    <router-view></router-view>

 三、跳转路由使用

 <button @click="$router.go(1)">前进一个页面</button>

            <button @click="$router.go(-1)">后退一盒页面</button>

四、命名路由使用方法

配置这样写，建三个页面 
 {
    path: '/main',
    components:{
     default: () => import('../components/main.vue'),
     top: () => import('../components/top.vue'),
     footer: () => import('../components/footer.vue'),
    }
  },
default为默认新式的路由
top为头部内容
footer底部内容


app.vue这样写
 
    <router-view name="top"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>

五、重定向

  path:需要重定向的页面

redirect：想要去的页面

 六.createWebHistory模式会自动去除#等

引入

 import {

  createRouter,

  createWebHashHistory,

  createWebHistory

} from 'vue-router'

使用

const router = createRouter({

  history: createWebHistory(),

  routes, // short for `routes: routes`

})