zoukankan      html  css  js  c++  java
  • [Vue + TS] Using Route events inside Vue

    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 }
    })
  • 相关阅读:
    Steve Jobs 2005年于 Stanford University 毕业典礼上的演讲
    欧姆龙血糖仪HEA214换购备忘
    (转载)2011年高考作文之《时间在流逝》(安徽考生)
    2012年部分节假日安排(转载)
    乔布斯语录(转载)
    欢乐谷一日游
    上海公交投诉电话:12319
    中国公路“买路钱”应该怎么管?(转载)
    C#操作excel
    SQL Server数据库对列的操作
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7507184.html
Copyright © 2011-2022 走看看