vue2 - router-link 的replace属性与push属性，编程式路由导航，路由的缓存

1.router-link 的replace属性与push属性

//替换游览器历史记录 游览器没有记录
<router-link replace ...></router-link>

//追加游览器历史记录 游览器有记录
<router-link push ...></router-link>

 

2.编程式路由导航

//params
this.$router.push({ name: 'user', params: { userId: '123' }})
this.$router.replace({ name: 'user', params: { userId: '123' }})

//query
this.$router.push({ path: 'register', query: { plan: 'private' }})
this.$router.replace({ path: 'register', query: { plan: 'private' }})

 

3.路由的缓存

全部缓存

<keep-alive>
   <router-view></router-view>
</keep-alive>

单个缓存

<keep-alive include="该路由的name名称">
   <router-view></router-view>
</keep-alive>

缓存多个指定路由

<keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

 

{
    path:'/test',
    name:'Test',
    component: Test,
    meta: {keepAlive: true} //true缓存 false不缓存
}