vue - 子路由-路由嵌套-白红宇

vue - 子路由-路由嵌套

阅读量：4445 次

发布时间：2019-06-07

本文共 1305 字，大约阅读时间需要 4 分钟。

描述：子路由，也叫路由嵌套，采用在children后跟路由数组来实现，数组里和其他配置路由基本相同，需要配置path和component，然后在相应部分添加<router-view/>来展现子页面信息，相当于嵌入iframe。

Home.vue

1 
     14 15 25 26

One.vue /Two.vue

1 
      6  7 17 18 
     19

index.js

1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import Home from '@/components/Home' 4 import One from '@/components/One'  5 import Two from '@/components/Two' 6  7 Vue.use(Router) 8  9 export default new Router({10     routes: [11     {12         path: '/', // 默认页面重定向到主页13         redirect: '/home'14     },15     {16         path: '/home', // 主页路由17         name: 'Home',18         component: Home,19         children:[ // 嵌套子路由20             {21                 path:'one', // 子页面122                 component:One23             },24             {25                 path:'two', // 子页面226                 component:Two27             },28         ]29     }30     ]31 })

转载于:https://www.cnblogs.com/cisum/p/9621235.html

你可能感兴趣的文章

{ { msg }}

{ { msg }}

{
{ msg }}

{
{ msg }}