1.新建模板页面 MainLayout.vue,并在template 里面防止标签用于嵌入 子页面内容
<template>
''' 其他页面内容 '''
<router-view></router-view>
''' 其他页面内容 '''
</template>
2.在 router的index.js 中设置子路由, 其中 DailyData.vue 是待嵌入的子页面
:
const routes = [//添加路由对象
''' 其他路由信息 '''
{
path: '/admin',
name: 'admin',
component: MainLayout,
meta: {requiresAuth: true},
children: [
{
path: '/DailyData',
name: 'DailyData',
component: DailyData
}
]
}
]
3. 在主页面需要跳转子页面的地方加入 router-link 进行链接跳转
<router-link to="/DailyData" class="link-color">导航一</router-link>
4.修改 router-link 样式,默认有下划线,点击后会变紫色,修改后保持父标签的样式, link-color 的样式为:
.link-color {
text-decoration: inherit;
color: inherit;
}
设置完成后,点击导航一就会直接挑战至子页面,但是其他内容不会更改。