VUE使用模板页面并预留子页面区域

发布时间 2023-08-12 13:35:35作者: lytcreate

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;
}

设置完成后,点击导航一就会直接挑战至子页面,但是其他内容不会更改。