[Vue + TS] Using Route events inside Vue
2024-08-28 07:50:11
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 }
})
最新文章
- javascript模块化编程(三):require.js用法
- 利用select函数的定时返回功能在Windows上实现微秒级的cpu休眠
- CART
- 多线程(三)GCD
- MySQL Index Condition Pushdown(ICP) 优化
- win7 服务详解-系统优化
- winPcap_5_打开适配器并捕获数据包
- 第28讲 UI组件之 ListView和ArrayAdapter
- iOS开发——打电话
- php Yii2 报错unexpected &#39;}&#39;
- [2016-03-15]rabbitmq notes
- 学Java必看,不看的人都后悔了
- 浅入javascript正则表达式的规则.
- 解决sublime text 3使用Install Package时出现There are no packages available for installation问题
- luogu P1077 摆花
- nginx重新安装 引起的问题
- 【Codeforces 1132F】Clear the String
- swift中闭包的学习。
- Objective-C内存布局
- 深入浅出HTTPS基本原理