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

前言

vue基于类的写法,和基于对象的写法并不一致。
使用vue-cli3创建的项目,src目录下的文件结构并没有多大区别,storerouterappviewcomponentsaeests该有的还是有的。
但是,多了一个东西:vue-property-decoratorvue-property-decoratorvue-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-decoratorvue-class-component有区别的原因,或者项目配置问题。
组件中实现路由监听,只能通过@Watch('$route')来实现。
但是@Watch不是路由守卫,如果离开当前组件,就不能继续监听路由变化,所以需要在当前的router-virew容器组件中监听。


其中{ immediate: true }是关键,必须加这个参数才嫩实现对$route的监听。

结语

vue-cli3+typescript的规范还不成熟,各种文档还不够齐全,尤其是中文文档。
很多demo都是基于vue2改造的,导致使用vue-cli3的时候出bug。
尤其是vue-routervuex的使用。
但也正是这些问题,让我们有更大的兴趣学习使用这个新的技术规范。

后记

经过社区同学的指点,使用路由钩子的组件必须由路由加载,做了测试,vue-cli3的路由守卫是可以使用的。
入口文件:

//main.ts
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import { Component } from 'vue-property-decorator';

Vue.config.productionTip = false;
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate',
]);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

路由规则文件:

//router.ts
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
});

路由载入组件:

//About.vue


如上,可以愉快的使用单独的路由钩子啦!!!

你可能感兴趣的:(vue-cli3+typescript初体验——router篇)