缓存路由组件
路由组件传值
编程式路由组件
路由守卫
1.缓存路由组件对象
要知道一点, 页面中的组件其实都是一些组件对象.
在页面中切换路由时, 会默认先销毁当前的路由组件对象, 在创建要访问的路由组件对象.
而销毁了之前的组件对象的话, 那个组件中的数据(可能是从后台花了很大力气得到的数据)也会销毁, 再切换回这个组件时, 又会重新请求组件中的数据.
如果我们对那些数据的实时性要求不高的话, 我们希望不要放弃之前的数据. 这就用到了------缓存路由组件对象的技术. 那些数据都在路由对象中存着, 只要对象不销毁, 数据就在.
缓存路由组件对象: 我们只需要显示路由组件的地方加个keep-alive标签说明一下就OK.
1 | <keep-alive> |
2.向路由组件传递数据
在vue中路由真实涉及的只有两个标签: router-link 和 router-view.
无可厚非, 我们有两种方法传递数据. 一种通过 router-link 传递, 一种通过 router-view 传递.
①路由路径携带参数
在这里也有两种携带参数的方式: 携带 param 参数和 query 参数.
在页面中切换路由组件时, 都会有一个特殊的对象 $route : 当前路由对象, 它存着一些路由的信息, 包括路由路径携带的参数(param/query).
- ①定义路由时, 不能把路径写死. 因为路径带有参数, 需要用占位符.
- ②编写路由连接时, 需要在 to 属性里指定占位符的值.
- ③在子路由组件中接收参数.
定义路由路径:
1 | path: 'message', |
编写路由连接:
1 | <!--<router-link :to="`/home/message/detail?id=${message.id}`">{{message.title}}</router-link>--> |
接收路由参数:
1 | <script> |
②router-view标签属性携带数据
- ①在父组件中的router-view标签属性中传递数据
- ②在子组件中的props中声明接收属性
Parent.vue:
1 | <router-view msg="Hello VueRouter!!!"></router-view> |
Child.vue:
1 | <script> |
3.编程式路由导航
路由(跳转页面)有两种基础的实现方式: 路由标签(如: a标签)和 JS编程实现路由.
vue中编程式路由导航用到了另一个对象 $router(路由器), 这是一个功能对象.
- this.$router.push(url): 相当于点击了路由链接(可以返回当前路由界面)
- this.$router.replace(url): 用新路由替换当前路由(不能再返回到当前路由界面)
- this.$router.back(): 返回到上一个记录路由(相当于浏览器的回退按钮)
- this.$router.go(1): 请求下一个记录路由(相当于浏览器的前进按钮)
4. History 模式
这种模式得玩好, 不然部署项目的时候你就知道了(奸笑). 开发的时候可以使用 history 模式, 但是建议, 部署项目的时候一定要使用(hash)模式.
当然, 你也可以配置一下web服务器, 使之支持 history 模式路由.
5.路由守卫
支持组件内路由和全局路由.
这里我只使用过 全局前置守卫路由: router.beforeEach((to, from, next).
主要是用来判断用户的token是否过期.