vue中缓存当前路由的实现

类似这种情况我们在分类页面查看到我们想要的商品之后然后我们去登陆页面登录上去再重新返回分页页面的时候还是显示着我们看到的效果

这样的效果我们可以使用 keep-alive 做到

用keep-alive 标签包括着就可以实现了

<keep-alive>

<router-view></router-view>

</keep-alive>

但又有了新的问题我们有的组件不想让缓存怎么办

比如登录组件别急我们还可以做到

在路由配置文件中进行配置那个需要缓存的话在路由对象下面添加一个属性 meta:{keepAlive } 专门用来存储用户自定义的属性不需要缓存的路由就不用添加

{

path: '/category',

name:'home',

comonent:()=>import('@/views/Home.vue'),

meta: {

keepAlive: true

}

{

path: '/profile',

name: 'profile',

comonent:()=>import('@/views/Login.vue'),

}

然后在App.vue文件中使用v-if渲染就好了有的keepAlive的就在缓存中渲染没有就不渲染就可以了

<keep-alive>

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

</keep-alive>

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

然后可以实现有的被缓存有的不被缓存

$router 和 $route 一个是路由对象一个是当前路由对象是有区别的大与小的关系

vue中缓存当前路由的实现相关推荐

Vue Router：vue中实现前端路由
Vue Router 官方文档文章目录一.路由简介路由分类路由安装二.路由基本使用安装路由器并设置路由规则实现路由切换指定组件的呈现位置 this中的 $router 和 $route ...
SKB中缓存的路由类型
skb结构体中的成员_skb_refdst用于暂时缓存路由,避免在skb生存期内的重复路由查找.不同于sock结构体中有两个成员缓存路由:sk_rx_dst缓存入口路由,sk_dst_cache缓存出 ...
vue中多个路由页面切换造成滚动互相影响问题的解决
一.问题描述在vue的项目开发中,出现了这样的问题.在进入一个路由页面的时候,进行了页面滚动,滚动的位置会被缓存.当离开页面以后,下次再进入一个页面的时候,切换新路由,发现默认进入的位置就是之前滚动 ...
059——VUE中vue-router之路由嵌套在文章系统中的使用方法：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue中的router路由
目录一,vue-router路由二,vue-router路由常用配置三,vue-router路由嵌套四,vue-router路由参数传递与获取五,使用props替代路由对象获取参数六,路由 ...
vue中设置动态路由
1.路由设置中设置指定页面都使用固定的视图组件,复用布局里面的导航routerBar,router-view 2.routerBar内部的钩子函数,使用vuex的action方法,获取动态路由配置,存 ...
Vue中实现动态路由
展示效果: 1.简单配置一个动态路由: 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个展示商品的组件,对于所有上架状态各不相同的商品,都要使用这个组件来渲染.那么,我 ...
055——VUE中vue-router之路由参数的随意设置与伪静态链接地址处理：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue中 vue-router的路由的2种模式（原生js模拟演示）
hash模式 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...

vue中缓存当前路由的实现

vue中缓存当前路由的实现相关推荐

最新文章

热门文章