vue-cli3+typescript初體驗——router篇

摘要： 前言 vue基於類的寫法，和基於物件的寫法並不一致。 使用vue-cli3建立的專案，src 目錄下的檔案結構並沒有多大區別，store 、router 、app 、view 、components 、...

前言

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 的使用。

但也正是這些問題，讓我們有更大的興趣學習使用這個新的技術規範。