vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these new hooks in your class based Vue components in TypeScript. We’ll also go over how we can create and use routes in Vue.

Default component:

<template>
<div class="hello">
<h1>{{ message }}</h1>
<button @click="clicked">Click</button>
<router-link to="/hello-ts">Hello Ts</router-link>
</div>
</template> <script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component' @Component({})
export default class Hello extends Vue {
message: string = 'Welcome to Your Vue.js App' get fullMessage() {
return `${this.message} from Typescript`
} created() {
console.log('created');
} beforeRouteEnter(to, from, next) {
console.log("Hello: beforeRouteEnter")
next()
} beforeRouteLeave(to, from, next) {
console.log("Hello: beforeRouteLeave")
next()
} clicked() {
console.log('clicked');
}
}

Create a second component:

<template>
<div>
<h1>Hello Ts</h1>
<router-link to='/'>Hello Vue</router-link>
</div>
</template> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Route from 'vue-router'; @Component({})
export default class HelloTs extends Vue{
created() {
console.log("Hello TS created")
} beforeRouteEnter(to: Route, from: Route, next: Function) {
console.log("beforeRouteEnter")
next();
} beforeRouteLeave(to: Route, from: Route, next: Function) {
console.log("beforeRouteLeave")
next();
}
}
</script>

Checkout Doc

There are tow route events, "beforeRouteEnter" and "beforeRouteLeave", each lifecycle hooks accepts three params "to, from , next", just like middlewares in nodejs, we need to call "next()" to make everything works.

Also we need to register the route link before using Vue.

hooks.ts:

import Component from 'vue-class-component'

Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave'
])

main.ts:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. import './hooks' import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

[Vue + TS] Using Route events inside Vue的更多相关文章

  1. [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript

    Vue watchers allow to perform async updates as a side effect of a property change. This lesson shows ...

  2. [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

    Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as for ...

  3. [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

    Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in y ...

  4. [Vue + TS] Write a Vue Component as a Class in TypeScript

    Starter app: https://github.com/alexjoverm/Vue-Typescript-Starter Writing Vue components as plain ob ...

  5. vue+ts搭建项目

    Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉 ...

  6. [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript

    With properties we can follow a one-way parent→child flow communication between components. This les ...

  7. 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

    1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择  ...

  8. 深入使用Vue + TS

    深入使用TS 支持 render jsx 写法 这里一共分两步 首先得先让 vue 支持 jsx 写法 再让 vue 中的 ts 支持 jsx 写法 让 vue 支持 jsx 按照官方做法,安装Bab ...

  9. 问题记录---关于posiition脱离文档流及vue中this.$route信息

    1.关于position:fixed会脱离文档流 简单例子: 原型有三个div盒子: 将剥box1设置为position:fixed后 从上图可以看出:box1脱离了文档流,且层级显示优先于正常文档, ...

随机推荐

  1. 判断DataGridView滚动条是否滚动到当前已加载的数据行底部

    private void dataGridView1_Scroll(object sender, ScrollEventArgs e) {   if (e.ScrollOrientation == S ...

  2. Programming Languages - Coursera 整理

    找到并学习这门课的原因: 想要学习 functional programming Week1 Introduction and Course-Wide Information week1 很轻松, 主 ...

  3. Android 使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换

    效果图如下 首先,要使用控件需要添加design library,在Android Studio中添加 compile 'com.android.support:design:23.4.0' 然后是布 ...

  4. Python(一) 基本类型

    前言: 什么是代码? 代码是现实世界事物在计算机世界中的映射. 什么事写代码? 写代码是将现实世界中的事物用计算机语言来描述. 一.数字:整形与浮点型 整型:int 浮点型:float (没有单精度和 ...

  5. vue中剖析中的一些方法

    1 判断属性 71 -81 var hasOwnProperty = Object.prototype.hasOwnProperty; /** * Check whether the object h ...

  6. Swift学习笔记(15)--下标脚本(Subscripts)

    下标脚本可以定义在类(Class).结构体(structure)和枚举(enumeration)这些目标中,使用中类似数组或者字典的用法 1.定义 定义下标脚本使用subscript关键字,语法: s ...

  7. <c:if test=""></c:if> 使用

    1.页面引用<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 2.整形判 ...

  8. HDU1796 How many integers can you find【容斥定理】

    题目链接: http://acm.hdu.edu.cn/showproblem.php? pid=1796 题目大意: 给你一个整数N.和M个整数的集合{A1.A2.-.Am}.集合内元素为非负数(包 ...

  9. 变量get、set设置

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用

    Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用 一.总结 一句话总结:$map['name'] = array('exp','is null'); 1.is null判断 ...