首页 > 编程语言 >vue2 - router-link 的replace属性与push属性,编程式路由导航,路由的缓存

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

时间:2023-02-18 15:55:05浏览次数:42  
标签:缓存 游览器 replace push router 路由 属性

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不缓存
}

 

标签:缓存,游览器,replace,push,router,路由,属性
From: https://www.cnblogs.com/ErenYeager/p/17132825.html

相关文章