对于它跳转的基准不太清除,网上也没有很好的解释。
根据实验暂得出:如果当前父页面的.vue的路径和子页面的.vue路径已经写在路由里了,那么
1.路由里未redirect。页面显示父页面,不显示子页面。但如果父页面后续有路由跳转,就会在<router-view>里显示子页面。(可把<router-view>看作<div>)
2.路由里已经redirect到子页面了。页面显示父页面,<router-view>里显示子页面。父页面后续有路由跳转,会在<router-view>里显示子页面。
如果父页面未写在路由里(如App.vue)那使用<router-view>就会跳转到你设置的默认路由,即设置了path: '/',的路径。
代码实例如下。
在solve.vue里使用<router-view>
<template> <div> <div> <router-link to="/solve/contain1">a</router-link>路由跳转 </div>父页面 <router-view></router-view>子页面 </div> </template>
情况1 router.js
{
path: '/solve',父页面
component: Solve,
name:'solve',
children: [{
path: '/solve/contain1',子页面
component: Solvecon1,
name:'contain1',
}
运行后<div>里显示父页面,<router-view>里不显示子页面,但<router-link to>跳转的界面会显示在<router-view>里
情况2 router.js
{
path: '/solve',
component: Solve,
name:'solve',
redirect: '/solve/contain1'
children: [{
path: '/solve/contain1',
component: Solvecon1,
name:'contain1',
}
运行后<div>里显示父页面,<router-view>里显示子页面,<router-link to>跳转的界面会显示在<router-view>里
这样,通过<router-view>就可以实现类似a标签的target效果。