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

栏目: JavaScript · 发布时间: 6年前

内容简介:vue基于类的写法,和基于对象的写法并不一致。使用vue-cli3创建的项目,但是,多了一个东西:

前言

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 容器组件中监听。

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

但也正是这些问题,让我们有更大的兴趣学习使用这个新的技术规范。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Transcending CSS

Transcending CSS

Andy Clarke、Molly E. Holzschlag / New Riders / November 15, 2006 / $49.99

As the Web evolves to incorporate new standards and the latest browsers offer new possibilities for creative design, the art of creating Web sites is also changing. Few Web designers are experienced p......一起来看看 《Transcending CSS》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具