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

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

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