Vue笔记(11) vue-router

学习内容

⊙ vue-router的参数传递

⊙ 导航守卫

⊙ keep-alive

参数传递

第一种传参方式:

App.vue

出来的效果就是这样的:

如果想取得query,也可以通过$route来获取

Profile.vue

第二种传参方式:

App.vue

导航守卫

我们可以发现在进行网页跳转时,我们的标题并不会发生变化,这是因为我们index里面的标题就是router-test

这个时候可以用到生命周期函数,当我们进行到某些步骤时,可以调用这些函数

以此类推,About的页面和User的页面都可以这么设置

现在网页的标题也可以跟着改变了

但是这样一个一个改也是很麻烦的,可以使用全局导航守卫来监听路由跳转事件

我们先在路由中定义meta元数据(描述数据的数据)

index.js

然后在下面调用beforeEach方法(前置守卫),当我们的路由从一个跳转到另一个时就会调用这个函数,在跳转前回调.导航守卫中的导航表示路由正在发生改变

因为如果像首页那种有嵌套路由的情况直接取meta就是空的,所以在matched中查找

为什么使用导航守卫:

keep-alive

我们设置的首页重定向了news新闻,当我们点击了首页的消息以后,又点击了关于的按钮,如果再跳转回首页,下面的消息又变回了新闻,这样的体验不是很好.

router-view也是一个组件,如果直接被包在keep-alive里,所有路径匹配到的视图组件都会被缓存

Keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染

App.vue

但是单单使用keep-alive是不够的,在跳转的时候还是会变回news

Home.vue

keep-alive看似没用的样子,但是如果没有keep-alive,activated和deactivate两个函数是不会被执行的

keep-alive里面的router-view里面的东西都不会被销毁,User,Profile等都不会,但是我们如果想要让Profile的界面每次都重新创建

keep-alive有两个非常重要的属性

我们先在Profile.vue中添加一个name

然后再让keep-alive排除掉这个

App.vue

也可以设置多个,但是注意逗号后面千万不能有空格!!!

案例实在是太难用这个写清楚啦,就看看我做的效果吧!