vue-router queryString

lo# vue-router

文章目录

queryString$route.query编程式导航 路由组件的复用watch

queryString

有的时候，我们可能也会用到 queryString

<select v-model="sort"> <option value="desc">从高到低</option> <option value="asc">从低到高</option> </select>

$route.query

我们可以通过路由对象 $route 的 query 属性来获取 queryString

... computed: { sort: { get() { return this.$route.query.sort || 'desc'; } } } ...

编程式导航

有的时候，我们可能需要用到编程的方式来导航（跳转），而不是点击链接。如：当 sort 发生改变的时候跳转

... computed: { sort: { get() { return this.$route.query.sort || 'desc'; }, set(newVal) { this.$router.push({ name: 'home', query: { sort: newVal } }); } } } ...

路由组件的复用

为了提高性能，增强路由组件的复用，当路由切换使用的是同一个组件的时候，则会复用该路由组件，而不是销毁重建，这个时候，我们就需要通过 watch 或者 路由相关的生命周期函数来处理切换路由导致的变化

watch

如果切换的路由复用了组件，这个时候，我们可以使用 watch 监听 $route

watch: { $route(to, from) { console.log('$route'); } } to : 改变之后的 $route 对象from : 改变之前的 $route 对象

但是我们可以使用 vue-router 提供路由守卫 （路由有关的生命周期函数）来处理路由有关的业务逻辑