纳速健身

标题: Vue router 路由嵌套children的基本使用实例讲解 [打印本页]

作者: awagink    时间: 2021-3-9 15:46
标题: Vue router 路由嵌套children的基本使用实例讲解
首先要在自己的路由配置文件里面创建对应的路由

例如我的路由主页是routerindex
两个子路由分别是routerboy和routergirl
  1. import Vue from 'vue'
  2. //1.引入路由
  3. import VueRouter from 'vue-router'

  4. import RouterIndex from '@/components/routerproject/routerindex'
  5. import routerboy from '@/components/routerproject/routerboy'
  6. import routergirl from '@/components/routerproject/routergirl'

  7. //2.安装路由
  8. Vue.use(VueRouter)

  9. //3.创建路由
  10. export default new VueRouter({
  11.         routes:[
  12.                 {
  13.                         path:"/routerproject/routerindex",
  14.                         name:"routerindex",
  15.                         component:RouterIndex,
  16.                         children:[
  17.                                 {
  18.                                         path:"routerboy",
  19.                                         name:"routerboy",
  20.                                         component:routerboy
  21.                                 },
  22.                                 {
  23.                                         path:"routergirl",
  24.                                         name:"routergirl",
  25.                                         component:routergirl
  26.                                 }
  27.                         ]
  28.                 }
  29.         ]
  30. })
复制代码


子路由需要在 VueRouter 的参数中使用 children 配置;
切记,在children 中,子路由的路径不要加 / ;

然后再看主路由页面routerindex的代码
1、首先要写入<router-view></router-view>添加路由视图
2、使用router-link并且写上子路由的位置路径,注意,这里就需要写上完整的路径
  1. <template>
  2.         <div>
  3.                 <h3>路由首页</h3>
  4.                 <router-link  to="/routerproject/routerindex/routerboy">跳转至儿子路由页面</router-link>
  5.                 <router-link  to="/routerproject/routerindex/routergirl">跳转至女儿路由页面</router-link>
  6.                 <router-view></router-view>
  7.         </div>
  8. </template>

  9. <script>
  10.         export default {
  11.                 name: 'routerindex',
  12.                 props: {
  13.                 },
  14.                 data(){
  15.                     return{
  16.                     }
  17.                 }
  18.         }
  19. </script>

  20. <style>
  21. </style>
复制代码




这是页面默认显示的样子,路径结尾是路由首页的路径

点击对应的跳转按钮,路径就会改变,页面上也会显示对应的路由页面显示的内容,如下图


如果想要直接显示【儿子路由】或者【女儿路由】,在路由配置文件中,添加redirect重定向即可
  1. children:[
  2.         {
  3.                 path:"",
  4.                 redirect:"routerboy"
  5.         },
  6.         {
  7.                 path:"routerboy",
  8.                 name:"routerboy",
  9.                 component:routerboy
  10.         },
  11.         {
  12.                 path:"routergirl",
  13.                 name:"routergirl",
  14.                 component:routergirl
  15.         }
  16. ]
复制代码










欢迎光临 纳速健身 (https://nasue.com/) Powered by Discuz! X3.4