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