vue-cli3+typescript初体验——router篇

前言
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的使用。但也正是这些问题，让我们有更大的兴趣学习使用这个新的技术规范。