vue-router路由相关问题

目录

vue-router中子路由的加载问题

vue 页面缓存 keep-alive

添加页面缓存

 清除页面缓存

方法一：在  上添加 exclude属性 

方式二：通过路由传参实现  $route.meta.keepAlive

 动态缓存

---

vue-router中子路由的加载问题

转载自vue-router中子路由的加载问题 - 简书

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'son',
        name: 'Son',
        component: Son
      }
    ]
  }
]

在学习Vue路由时经常会看到上述例子，这时候访问son组件的路由是/home/son
但是在项目中配置的时候我们往往都要配置一个重定向，由父页面指向子页面，所以我们需要redirect

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    redirect: '/son', //重定向
    children: [
      {
        path: '/son', //这里的路径跟上边的不一样，前边加上了'/'
        name: 'Son',
        component: Son
      }
    ]
  }
]

这时候只要我们访问主页面/home页面就会跳转到/son路由，并把home组件连带son组件一起加载出来。

这与上边有什么不同呢？

上边访问的路径是/home/son，而这里只要访问/son就能直接打开同样的页面。在网上找了好多资料，最后在官网找到这样一句话

如果在嵌套路由的path前加上了’/‘，那么这个path就会被当作根路径。所谓根路径应该就是可以直接访问到的路径，vue-router应该会把以’/'开头的子路由与它所在的父组件默认绑定在一起，当我们访问/son时就相当于访问了/home/son。

总结：子路由的path如果前边带 '/ ' 则访问这个子路由时只需要访问子路由的path，系统会默认加载它所在的父组件。如果前边没有 '/ ' 那么需要按照 /父路由/子路由的形式访问。 

---

vue 页面缓存 keep-alive

转载自vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）_vue: :exclude_朝阳39的博客-CSDN博客

• 添加页面缓存

使用keep-alive将组件包裹，则再次进入页面时，会使用缓存中的组件，不会重新渲染（不再执行mounted及之前的生命周期中的代码），用于保存组件的原始状态（所有变量的值保持最终状态不变）

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

•  清除页面缓存

若部分页面希望每次打开时，都重新渲染（所有变量初始化为data中定义的值，并执行mounted及之前的生命周期中的代码），则需清除页面缓存

方法一：在 <keep-alive> 上添加 exclude属性 

（1）属性值为需清除缓存的页面的vue文件的name属性的值

比如针对 /test 路由对应的 test.vue组件清除缓存，则需给 test.vue 文件添加 name属性，值为“test” （可自定义为任意字符串）

    export default {
        name:'test',
        ......
    }

（2）在 <keep-alive> 上添加 exclude属性 

<keep-alive exclude="test" >
    <router-view></router-view>
</keep-alive>

 若针对多个页面清除缓存，则使用 , 将name属性值隔开  name属性值与逗号之间不要加空格！！！

<keep-alive exclude="test1,test2" >
    <router-view></router-view>
</keep-alive>

方式二：通过路由传参实现  $route.meta.keepAlive

将 src/App.vue 中改为：

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

在定义路由的文件中，设置 meta.keepAlive 参数，如在 src/routes.js 中

    // 使用缓存的页面
    {
        path: '/SUI',
        meta: {
            keepAlive: true
        },
        name: 'SUI官网',
        component: resolve => require(['@/projects/SUIweb/index'], resolve)
    },


    // 不使用缓存的页面
    {
        path: '/dic',
        name: '速查手册',
        component: resolve => require(['@/projects/dic/index'], resolve)
    },

•  动态缓存

现需实现以下功能：

• 从B页面到A页面——刷新A
• 从C页面到A页面——不刷新A

即从不同页面进入相同页面，有时需使用缓存，有时不使用缓存，这时需使用到 beforeRouteLeave(to, from, next)

// A界面路由定义
{
  path: '/list',
  name: 'A',
  component: List.vue,
  meta: {
    keepAlive: true // 需要被缓存
  }
}

// B页面组件中，设置beforeRouteLeave
export default {
  beforeRouteLeave(to, from, next) {
    // 让A界面不缓存，即刷新
    to.meta.keepAlive = false; 
    next();
  }
};


// C页面组件中，设置beforeRouteLeave
export default {
  beforeRouteLeave(to, from, next) {
    // 让A页面缓存，即不刷新
    to.meta.keepAlive = true; 
    next();
  }
};