vue多级路由keep alive问题,vue-router keep-alive
本文主要详细介绍vue路由保护和保活。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
Vue-Router lazy loading如何定义动态路由参数模式查询模式Vue-Router导航守护全局路由钩子router.beforeEach路由独占守护组件guard BeforeRouteUpdateBeforeRouteVue路由钩子在生命周期函数的实现中，keep-alive生命周期钩子activateddeactivated触发钩子的完整序列摘要。
Vue-Router懒加载
1、箭头函数+import
const List=()=import( @/components/List . vue )
const router=new VueRouter({
路线：[
{路径：“/list”，组件：List }
]
})
2、箭头函数+require
常量路由器=新路由器({
路线：[
{
路径：“/list”，
component:resolve=require([ @/components/list ]，resolve)
}
]
})
如何定义动态路由
param方式
路由格式：/router/:id传输方式：对应值传输后形成的路径遵循路径：/router/123路由定义
//在APP.vue中
路由器链接：to=/user/userid 替换用户/路由器链接
//在index.js中
{
路径：“/user/:userid”，
组件：用户，
},
路由跳转
//方法1: router-link: to= {name: users ，params:{ my name:Jake } button/router-link//方法2: 3:this。$router.push//({name: users ，params: {my name: Jake}})
Router-link: to= {name: users ，params: {my name: Jake}} 按钮/router-link
//方法二：
这个。$router.push({name:users ，params:{myname:jake}})
//方法三：
这个。$router.push(/user/ jake)
参数获取:通过$ route.params.userid获取传递的值。
query方式
配置格式：/router，即正常配置。传递方式：查询的关键字作为对象中的传递方式。交付后形成的路径：/route？id=123 .路由定义
//方式一：直接以router-link标签上的对象的形式
路由器链接：to= {path:/profile ，查询：{name: why ，age: 28，height: 188}} 文件/路由器链接
//方式二：写成按钮点击事件窗体。
button @ click= profile click my/button
profileClick(){
这个。$router.push({
路径：“/profile”，
查询：{
姓名：科比，
年龄： 28 ，
身高：198
}
});
}
跳转方法
//方法一：
路由器链接：to= {name: users ，query: {uname: James}} 按钮/路由器链接
//方法二：
这个。$router.push({ name: users ，query:{ uname:james }})
//方法三：
路由器链接：to= {path:/user ，query: {uname: James}} 按钮/路由器链接
//方法四：
这个。$router.push({ path: /user ，query:{ uname:james }})
//方法五：
这个。$router.push(/user？uname= jsmes)
获取参数:通过$ route.query获取传递的值。
Vue-Router导航守卫
有时候，需要通过路由来执行一些操作，比如最常见的登录授权验证。当用户满足条件时，将被允许进入导航，否则，将取消跳转，跳转到登录页面进行登录。由于这个原因，有许多方法来嵌入路线的导航过程：全局的、专用于单个路线的、或者组件级的。
全局路由钩子
vue-router全局有三个守卫：
router . before每个全局前警卫进入路线前。Router.beforeResolve全局解析保护，在beforeRouteEnter调用后调用。路由器。每本全球邮册进入路线后。to、from、next这三个参数：
和to from是将要进入和离开的路线对象，路线对象指的是通常通过这个获得的路线对象。$route。下一步：函数该参数为函数，必须调用，否则无法输入进路(空白页)。
Next()输入路线。Next(false):取消来话路由，将url地址重置为发话路由地址(即将要离开的路由地址)。
router.beforeEach
Router.beforeEach是全局前沿守卫，在进入路由之前。
router.beforeEach((收件人，发件人，下一个)={
let ifInfo=vue . prototype . $ common . getsession( user data )；//存储的确定是否登录的信息
如果(！ifInfo) {
sessionstorage中没有存储用户信息。
if (to.path==/) {
//如果是登录页面路径，直接next()
next()；
}否则{
//否则跳转登录。
Message.warning(请重新登录！);
window . location . href=vue . prototype . $ log in URL；
}
}否则{
返回next()；
}
})
路由独享守卫
如果您不想全局配置防护，您可以为某些路由单独配置防护：
const router=new VueRouter({
路线：[
{
路径：“/home”，
成分：家，
beforeEnter:(收件人，发件人，下一个)={
//参数用法相同。调用序列在全局保护之后，因此不会被全局保护覆盖。
//.
}
}
]
})
组件内的守卫
beforeRouterEnter
BeforeRouterEnter不能访问它，因为钩子是在组件实例创建之前调用的，所以它不能获取组件实例this。您可以通过向next发送回调来访问组件实例。
beforeRouteEnter(收件人，发件人，下一个){
Console.log(路由独占保护后调用)；
接下来(虚拟机={
//通过 VM 访问组件实例this 在挂载后执行回调，
})
}
beforeRouteUpdate
beforeRouteUpdate(收件人，发件人，下一个){
//当当前路由更改，但组件被多路复用时，调用可访问的组件实例“this”。
//比如对于一个带有动态参数的path /user/:id，在/user/1和/user/2之间跳转时，
//由于将呈现相同的用户组件，组件实例将被重用。在这种情况下这个钩子将被调用。
}
beforeRouteLeave
在导航这个组件对应的路由时调用，我们用它来禁止用户离开，比如草稿还没有保存，或者在用户离开前破坏setInterval，防止离开后定时器还在调用。
beforeRouteLeave(收件人、发件人、下一个){
If(物品保存){
next()；//允许离开或跳转到另一个路由，如上所述。
}否则{
下一个(假)；//取消出发
}
}
Vue路由钩子在生命周期函数的体现
完整的路线导航解决流程(不包括其他生命周期):
触发对其他路线的访问。调用组件guard beforeRouteLeave离开路由，调用全局前端guard: beforeEach调用beforeRouteUpdate调用重用组件中的独占guard beforeEnter。解析异步路由组件。在传入路由组件中调用beforeRouteEnter，并在确认解析导航之前调用全局解析保护。调用全局post钩子的afterEach钩子。触发DOM更新(已安装)。在beforeRouteEnter guard中执行传递给next的回调函数。
keep-alive
在vue项目的开发中，大部分组件不需要多次渲染，所以vue提供了内置的组件keep-alive来缓存组件的内部状态，避免重新渲染。
Document:类似于，是一个抽象组件：它本身不呈现DOM元素，也不出现在父组件链中。
生命周期钩子
在keep-alive包含的组件/路由中，会多两个生命周期的钩子：激活和去激活。
activated
Activated在首次呈现组件时调用，然后在每次激活缓存组件时调用。首次进入缓存路由/组件，挂载后，beforeRouteEnter守护传递给next的回调函数并调用：
BeforeMount=其他路由进入(被破坏/停用)=
Mounted=激活以进入高速缓存组件=在RouteEnter回调之前执行
因为组件是缓存的，所以当您再次输入缓存的路由/组件时，不会触发这些挂钩：beforeCreate，created，beforeMount，mounted。
所以之后的调用时机是：
销毁已销毁的组件/或保持缓存停用=激活并输入当前缓存组件=执行beforeRouteEnter回调。
deactivated
停用(离开路由时调用组件)。如果使用keep-alive，则不会调用beforeDestroy(组件销毁前的钩子)和Destroy(组件销毁)，因为组件没被销毁是缓存的。
这个钩子可以看作是beforeDestroy的替代品。如果你缓存组件，并想在组件被销毁时做些什么，你可以把它们放在这个钩子中。如果你离开路线，它将依次触发：
在route Leave=route front guard before each=global rear hook after each=deactivated之前保留当前的route hook保留缓存组件=激活输入缓存组件(如果还输入了缓存路由)
//如果离开的组件没有缓存，beforeDestroy将替换deactivated。
//如果进来的路由没有缓存，全局post钩子after each=destroyed=before create等等。
那么，如果只是想缓存其中几个路由/组件该怎么办呢？
Vue2.1.0之前：两个keep-alive标签+v-if判断
点火电极
路由器视图v-if=$route.meta.keepAlive
！-以下是将被缓存的路线-
/路由器-查看
/保持活力
路由器-查看v-if=！$route.meta.keepAlive
！-因为使用了v-if，所以将在下面创建一个未缓存的路由视图出口-
/路由器-查看
//路由器配置
新路由器({
路线：[
{
路径：“/”，
姓名：家，
成分：家，
元：{
keep:true//需要缓存
}
},
{
路径：“/:id”，
名称：编辑，
组件：编辑，
元：{
KeepAlive: false //不需要缓存
}
}
]
});
Vue2.1.0版本之后：Vue添加了两个新属性，以便在保持活动的情况下有条件地缓存路由/组件。
包括：匹配的路由/组件将被缓存排除：匹配的路由/组件将不被缓存(具有高优先级)。include和exclude支持三种有条件缓存路由的方式：逗号分隔字符串、常规形式和数组形式。和常规数组形式，后者必须以v-bind形式使用。
Keep-alive包括=a，b//逗号分隔形式
组件：is= view /组件
/保持活力
触发钩子的完整顺序
结合路线导航、保持活动和组件生命周期挂钩，触发序列假定为您第一次离开组件A并进入组件B:
BeforeRouteLeave:路由组件的组件离开预路由钩子，可以取消路由出发。BeforeEach:路由的全局前置守护，可用于登录验证、全局路由加载等。enter:routing before route enter独占守护：布线组件的组件在布线前进入钩子。BeforeResolve:全局解析保护afterEach:全局posthook beforeCreate:组件生命周期，无法访问。已创建：组件生命周期，这个可以访问，但是dom不能访问。Before:组件生命周期停用：保留缓存组件A，或者触发A的beforeDestroy和destroyed组件销毁钩子。挂载：访问/操作dom。已激活：输入的缓存组件和嵌套子组件(如果有)。接下来执行beforeRouteEnter回调函数。其实大部分的生命周期钩子函数都不会用到，但是有几点需要注意：
1.ajax请求最好放在created中，在这种情况下可以访问它，请求返回的数据可以放在data中。
2.关于dom的操作应该放在mounted里面，在mounted前面访问dom会不定义，因为渲染还没有完成。
3.每次需要一些操作来进入或离开一个组件时：
你可以在不进入缓存的时候使用创建的和挂载的钩子，在离开的时候使用之前和销毁的钩子。之前和销毁可以可以访问这个和销毁不可以访问这个。
缓存组件：缓存组件后，重新输入组件将不会触发beforeCreate、created、beforeMount和mounted。如果你想在每次进入组件时都做些什么，你可以把它放在激活到缓存组件的钩子中。同样，在离开缓存组件时，beforeDestroy和destroyed也不会被触发，可以使用deactivated离开缓存组件的钩子来代替。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。