vue路由嵌套,配置children嵌套路由

嵌套路由就是路由里面嵌套他的子路由,可以有自己的路由导航和路由容器(router-link、router-view),通过配置children可实现多层嵌套

 1 //mine组件
 2 <template>
 3     <div class="content">
 4         在mine的组件里面嵌套路由
 5         <router-link to="/mine/c">去到Cpage</router-link>
 6         <router-link to="/mine/d">去到Dpage</router-link>
 7         <div class="child">
 8             <router-view></router-view>
 9         </div>
10     </div>
11 </template>

 1 //router.js
 2 //引入需要的组件,下是我的路径
 3 import vue from 'vue'
 4 import Router from 'vue-router'
 5 import Home from '@/components/home'
 6 import Mine from '@/components/mine'
 7 import Cpage from '@/page/mine/c'
 8 import Dpage from '@/page/mine/d'
 9 Vue.use(Router)
10 
11 export default new Router({
12   routes: [
13     {   
14         path: '/',
15         redirect: 'home'
16     },
17     {
18       path: '/home',
19       name: 'home',
20       component: Home
21     },
22     {
23       path: '/mine',
24       name: 'Mine',
25       component:Mine,
26       children:[
27         {
28             path:'/',
29             component:Cpage,
30         },
31         {
32             path:'/mine/c',
33             component:Cpage,
34         },
35         {
36             path:'/mine/d',
37             component:Dpage,
38         }
39       ]
40       //children这是嵌套的部分
41     },
 1 //c.vue
 2 <template>
 3     <div class="top-80">
 4         c.vue
 5         <p>这里Cpage文件</p>
 6     </div>
 7 </template>
 8 
 9 
10 //d.vue
11 <template>
12     <div class="top-80">
13         d.vue
14         <p>这里Dpage文件</p>
15     </div>
16 </template>

嵌套路由通过配置children可实现多层嵌套,其它规则写法一样;

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » vue路由嵌套,配置children嵌套路由

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活