嵌套路由尝尝用于单页面应用中,例如切换导航按钮 下面页面切换。
主页面关键代码
/customerService
<template>
<div>
<div id="header">
<ul>
<router-link :to="{name: 'search'}" tag="li">查询</router-link>
</ul>
</div>
<div id="content">
<router-view></router-view>
</div>
</div>
</template>
路由配置
{
path: '/customerService',
component: (resolve) => require(['@/views/customerService/index.vue'], resolve),
hidden: true,
children: [
{
path: 'queryPolicy',
component: (resolve) => require(['@/views/customerService/queryPolicy/index.vue'], resolve),
name:'search'
},
{
path: '',
component: default,//为customerService子路由未匹配时显示的子页面compontent
name:'default'
}
]
},
router-link指向子路由 :to"{name:'search'}" :to"{path:"/customerService/queryPolicy"}"
<router-link :to="'index'">Home</router-link>
注意这个组件的导出需要有类似下面的代码
export default {
name: 'App',
data(){
return {
index:'/'
}}}
tag=""默认为a,为router-link的标签类型
active-class 为该router-link激活时的样式