<router-view></router-view> <router-link >
主页面组件
<template>
<div style="text-align: center;">
<h1>主页面</h1>
<router-view></router-view>
<router-link to="link">跳转</router-link>
</div>
</template>
子页面组件
<template>
<div style="text-align: center;">
<h2>子路由页面</h2>
</div>
</template>
link跳转的页面
<template>
<div style="text-align: center;">
<h1>router-link跳转的页面</h1>
</div>
</template>
编写路由:
export default new Router({
routes: [
{
path: '/link',
component: resolve => require(['../components/page/sys/link.vue'], resolve),
meta: {title: '跳转页面'}
},
{
path : '/parent',
component: resolve => require(['../components/page/sys/parent.vue'], resolve),
meta: {title: '主页面'},
children : [
{
path: '/child',
component: resolve => require(['../components/page/sys/child.vue'], resolve),
meta: {title: '子页面'}
}
]
}
}
测试结果: