1.什么是嵌套路由
是否是嵌套路由主要是由页面结构来决定的,实际项目中的应用页面,通常由多层嵌套的组件组合而成。
简而言之,嵌套路由就是在路由里面嵌套它的子路由。
嵌套子路由的关键属性是children,children也是一组路由,相当于前面讲到的routes一样地去配置路由数组。
每一个子路由里面可以嵌套多个组件,子组件又有路由导航和路由容器。
2.嵌套路由示例
Vue
<template>
<div id="app">
<router-link to="/user/about" tag="button">关于公司</router-link>
<router-link to="/user/contact" tag="button">联系我们</router-link>
<router-view />
</div>
</template>
<template>
<div id="app">
<h1>北京dsadadas科技有限公司</h1>
</div>
</template>
<template>
<div id="app">
<h1>联系我们</h1>
<p>公司位于北京市海定区中关村科技园内,主营业务包括餐饮娱乐</p>
</div>
</template>
import user from '@/components/user.vue'
import about from '@/components/about.vue'
import contact from '@/components/contact.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/user',
component: user,
children: [
{ path: 'about', component: about },
{ path: 'contact', component: contact }
]
}
]
})