vue路由嵌套,配置children嵌套路由 r囧r小猫 2022-05-20 05:00 317阅读 0赞 嵌套路由就是路由里面嵌套他的子路由,可以有自己的路由导航和路由容器(router-link、router-view),通过配置children可实现多层嵌套 //mine组件 <template> <div class="content"> 在mine的组件里面嵌套路由 <router-link to="/mine/c">去到Cpage</router-link> <router-link to="/mine/d">去到Dpage</router-link> <div class="child"> <router-view></router-view> </div> </div> </template> //router.js //引入需要的组件,下是我的路径 import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/home' import Mine from '@/components/mine' import Cpage from '@/page/mine/c' import Dpage from '@/page/mine/d' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: 'home' }, { path: '/home', name: 'home', component: Home }, { path: '/mine', name: 'Mine', component:Mine, children:[ { path:'/', component:Cpage, }, { path:'/mine/c', component:Cpage, }, { path:'/mine/d', component:Dpage, } ] //children这是嵌套的部分 }, //c.vue <template> <div class="top-80"> c.vue <p>这里Cpage文件</p> </div> </template> //d.vue <template> <div class="top-80"> d.vue <p>这里Dpage文件</p> </div> </template> ... 嵌套路由通过配置children可实现多层嵌套,其它规则写法一样;
还没有评论,来说两句吧...