vue-router queryString

lo# vue-router

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 提供路由守卫 （路由有关的生命周期函数）来处理路由有关的业务逻辑