前言
vue 基于类的写法，和基于对象的写法并不一致。使用 vue-cli3 创建的项目，src 目录下的文件结构并没有多大区别，store、router、app、view、components、aeests 该有的还是有的。但是，多了一个东西：vue-property-decorator，vue-property-decorator 是 vue-class-component 的超集。
import {Component, Prop, Vue, Watch, Emit} from ‘vue-property-decorator’;
最主要的区别就是这里，组件的定义，参数的接受，方法的定义，等等。但是本文主要讲的是 router 的监听。
路由监听
用 vue2 的 vue-cli 创建项目，在 src 下有 App.vue,main.js，其中如果要做路由权限控制，可以通过在 mian.js 添加以下代码来控制：
import router from ‘./router’
router.beforeEach((to, from, next) => {
/* 如果需要登录，当前没有登录，直接跳转到登录页 */
if (to.meta.Auth && !store.state.loginStatus) {
return next({name: ‘Login’, query: {path: to.name}})
}
next()
})
这个功能，在新版本的 vue3 中依然可以使用，因为使用了 typescript，所以应该是 main.ts 文件。但是如果要在组件内部使用路由监听，就遇到问题了，路由钩子 beforeRouteEnter,beforeRouteLeave,beforeRouteUpdate 不生效。官网推荐在 mian.ts 中注册解决：
import Component from ‘vue-class-component’
Component.registerHooks([
‘beforeRouteEnter’,// 进入路由之前
‘beforeRouteLeave’,// 离开路由之前
‘beforeRouteUpdate’
])
但是在 vue-cli3 中试过，不生效。可能是 vue-property-decorator 和 vue-class-component 有区别的原因，或者项目配置问题。组件中实现路由监听，只能通过 @Watch(‘$route’)来实现。但是 @Watch 不是路由守卫，如果离开当前组件，就不能继续监听路由变化，所以需要在当前的 router-virew 容器组件中监听。
<template>
<div id=”app”>
<div id=”nav”>
<router-link to=”/”>Home</router-link> |
<router-link to=”/about”>About</router-link>
</div>
<router-view/>
</div>
</template>
<script lang=”ts”>
import {Component, Vue, Watch} from ‘vue-property-decorator’;
@Component
export default class App extends Vue {
@Watch(‘$route’,{ immediate: true})
private changeRouter(route: Route){
console.log(route)
}
}
</script>
其中 {immediate: true} 是关键，必须加这个参数才嫩实现对 $route 的监听。
结语
vue-cli3+typescript 的规范还不成熟，各种文档还不够齐全，尤其是中文文档。很多 demo 都是基于 vue2 改造的，导致使用 vue-cli3 的时候出 bug。尤其是 vue-router 和 vuex 的使用。但也正是这些问题，让我们有更大的兴趣学习使用这个新的技术规范。