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
的使用。
但也正是這些問題，讓我們有更大的興趣學習使用這個新的技術規範。