©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>监听路由变化的方法
<>1.watch
需要注意的是，只能监听到子路由的改变。
* Person.vue <template> <div id="person"> <h1 @click="toMain">个人中心</h1> <p>
这里是个人中心，欢迎访问个人相关信息</p> <router-link to="/person/user">用户信息</router-link> <
router-view></router-view> </div> </template> <script> export default { name:
'Person', data () { return { } }, watch: { $route(to, from) {
//这里可以加你监听到路由改变时要触发的方法 console.log(to.path) console.log(from.path) } }, methods:
{ toMain() { this.$router.go(-1) } } } </script> <style> #person { color:
greenyellow; } #person p { background: pink; } </style>
-router.js
import Vue from 'vue' import Router from 'vue-router' import App from
'../App.vue' import Main from '../components/Main.vue' import Person from
'../components/Person.vue' import User from '../components/User.vue' Vue.use(
Router) export default new Router({ routes: [ { path: '/', name: 'App',
component: App, children: [{ path: 'main', name: 'Main', component: Main }] }, {
path: '/person/', name: 'Person', component: Person, children: [ { path: 'user'
, name: 'User', component: User } ] } ] })
<>2.使用路由钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
钩子函数beforeRouteEnter，beforeRouteLeave 可以监听本身路由的改变的
beforeRouteUpdate则是监听子路由的变化的 钩子函数的缺点是没发操作获取 `this` beforeRouteEnter (to, from,
next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当钩子执行前，组件实例还没被创建
console.log(to.path) console.log(from.path) if(to.path == '/person/user'){
console.log('ok!') } next() }, beforeRouteUpdate (to, from, next) { //
在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` },
beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` },
<>大家一起进步，文章有啥疑问可以问，尽量回答。若发现什么问题也麻烦大牛们指出，谢谢。