关于vue的＜router-view＞

对于它跳转的基准不太清除，网上也没有很好的解释。

根据实验暂得出：如果当前父页面的.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效果。