CRainyDay

缓存路由组件

路由组件传值

编程式路由组件

路由守卫

1.缓存路由组件对象

  要知道一点, 页面中的组件其实都是一些组件对象.

  在页面中切换路由时, 会默认先销毁当前的路由组件对象, 在创建要访问的路由组件对象.

  而销毁了之前的组件对象的话, 那个组件中的数据(可能是从后台花了很大力气得到的数据)也会销毁, 再切换回这个组件时, 又会重新请求组件中的数据.

  如果我们对那些数据的实时性要求不高的话, 我们希望不要放弃之前的数据. 这就用到了——缓存路由组件对象的技术. 那些数据都在路由对象中存着, 只要对象不销毁, 数据就在.

缓存路由组件对象: 我们只需要显示路由组件的地方加个keep-alive标签说明一下就OK.

1
2
3
<keep-alive>
<router-view></router-view>
</keep-alive>

2.向路由组件传递数据

在vue中路由真实涉及的只有两个标签: router-link 和 router-view.

无可厚非, 我们有两种方法传递数据. 一种通过 router-link 传递, 一种通过 router-view 传递.

①路由路径携带参数

在这里也有两种携带参数的方式: 携带 param 参数和 query 参数.

在页面中切换路由组件时, 都会有一个特殊的对象 $route : 当前路由对象, 它存着一些路由的信息, 包括路由路径携带的参数(param/query).

  • ①定义路由时, 不能把路径写死. 因为路径带有参数, 需要用占位符.
  • ②编写路由连接时, 需要在 to 属性里指定占位符的值.
  • ③在子路由组件中接收参数.

定义路由路径:

1
2
3
4
5
6
7
8
9
path: 'message',
component: Message,
children: [
{
//path: '/home/message/detail?id=:id',//路径携带query参数.
path: '/home/message/detail/:id',//路径携带param参数.带有占位符
component: Detail
}
]

编写路由连接:

1
2
<!--<router-link :to="`/home/message/detail?id=${message.id}`">{{message.title}}</router-link>-->
<router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>

接收路由参数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
export default {
data () {
return {
id: ''
}
},
mounted () {
setTimeout(() => {//模拟异步ajax请求
this.id = this.$route.params.id//这里接收的是param参数
//this.id = this.$route.query.id//这样接收的是query参数
}, 1000)
},
watch: {
//这里需要监视$route对象,因为mounted函数只会调用一次.
//当前组件不知道$route的值发生了变化.故须监视
$route: function (value) {
this.id = value.params.id
}
}
}
</script>

②router-view标签属性携带数据

  • ①在父组件中的router-view标签属性中传递数据
  • ②在子组件中的props中声明接收属性

Parent.vue:

1
<router-view msg="Hello VueRouter!!!"></router-view>

Child.vue:

1
2
3
4
5
6
7
<script>
export default {
props: {
msg: String
}
}
</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是否过期.


 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有