vue-router子路由-路由嵌套

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

1、src/components/Home.vue（父页面）

<template> <div class="hello"> <h1>{{ msg }}</h1> <!-- 添加子路由导航 --> <p>导航 ： <router-link to="/home">首页</router-link> | <router-link to="/home/one">-子页面1</router-link> | <router-link to="/home/two">-子页面2</router-link> </p> <!-- 子页面展示部分 --> <router-view/> </div> </template> <script> export default { name: 'Home', data () { return { msg: 'Home Page!' } } } </script> <style scoped> </style>

2、src/components/One.vue（子页面1）

<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'One', data () { return { msg: 'Hi, I am One Page!' } } } </script> <style scoped> </style>

3、src/components/Two.vue（子页面2）

<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'Two', data () { return { msg: 'Hi, I am Two Page!' } } } </script> <style scoped> </style>

4、src/router/index.js（路由配置）

import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import One from '@/components/One' import Two from '@/components/Two' Vue.use(Router) export default new Router({ routes: [ { path: '/', // 默认页面重定向到主页 redirect: '/home' }, { path: '/home', // 主页路由 name: 'Home', component: Home, children:[ // 嵌套子路由 { path:'one', // 子页面1 component:One }, { path:'two', // 子页面2 component:Two }, ] } ] })

5.效果图如下