您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

21Vue中路由的嵌套(父子,children)

发布时间：2023-04-11 15:50:46编辑：雪饮阅读（）

路由的嵌套其实说白了就是父子路由，好比有个用户模块，用户模块下面有新增用户和用户列表这两个子组件或者说是子路由。
那么这里就是就是更能了解下router-view的作用。router-view不仅仅是占位，更深点来说就是在当前环境（比如App.vue或上面这个用户模块中（假如用户模块中新增用户和用户列表这两个子路由通过从用户模块跳转到这两个子路由时候浏览器不用刷新，此时就体现了router-view的作用））下所匹配相对路由的呈现。
具体实现如下
先创建一个用户新增的vue如userAdd.vue
<template>
    <div>这里是用户新增组件</div>
</template>
然后用户列表userList.vue
<template>
    <div>这里是用户列表组件</div>
</template>
然后是用户模块user.vue
<template>
    <div>
        <div>这里是用户模块</div>
        <div>
            <div style="float:left;">
                <ul>
                    <li @click="goto('user_add')">新增用户</li>
                    <li @click="goto('user_list')">用户列表</li>
                </ul>
            </div>
            <div>
                <!---router-view用于匹配当前环境下路由所匹配到的组件的呈现--->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return {}
    },
    methods:{
        goto(name){
          this.$router.push({name:name});
        }
    }
}
</script>
然后App.vue也修改下将用户模块挂上
<template>
  <div id="app">
    <button @click="goto('index')">首页</button>
    <button @click="goto('news')">新闻</button>
    <button @click="goto('user')">用户</button>
    <hr/>
    <router-view></router-view>
  </div>
</template>
 
<script>
    export default {    
      data () {
        return {}
      },
      methods:{
        goto(name){
          this.$router.push({name:name});
        }
      },
    }
</script>
 
然后main.js中配置父子（嵌套）路由规则
import Vue from 'vue'
import App from './App.vue'
 
import VueRouter from 'vue-router';
Vue.use(VueRouter);
 
import Index from './components/Index.vue';
import News from './components/news.vue';
import Content1 from './components/content1.vue';
import Content2 from './components/content2.vue';
//导入用户模块
import User from './components/user.vue';
//导入用户模块-用户新增
import UserAdd from './components/userAdd.vue';
//导入用户模块-用户列表
import UserList from './components/userList.vue';
import './assets/css/basic.scss';
 
const routes=[
  {path:'/',component:Index,name:'index'},
 
  {path:'/news',component:News,name:'news'},
  {path:'/news/content1/:aid',component:Content1},
  {path:'/news/content2',component:Content2},
  //用户组件（用户模块）
  {
    path:'/user',
    component:User,
    name:'user',
    children:[
      //用户模块-用户新增
      {path:'/user_add',component:UserAdd,name:'user_add'},
        //用户模块-用户列表
      {path:'/user_list',component:UserList,name:'user_list'},
    ]
  },
 
  {path:'*',component:Index}
];
const router=new VueRouter({
  routes,
  mode:'history'
})
 
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})