【Vue 基础篇】监听路由的变化和跳转404页面

提示：前端查漏补缺，仅代表个人观点

---

今天是农历八月十五中秋节，先祝看到此文章的博友中秋节快乐！！！

一、前言

本文章主要讲解Vue监听路由、跳转404页面的实现和需要注意的事项，欢迎点赞评论!

---

二、实战步骤

1. 监听路由的方法

方法一：watch

// 当路由发生变化的时候执行

watch:{
  $route(to,from){
    console.log(to.path);  // 去哪
    console.log(from.path);   // 从哪来
  }
},

1
2
3
4
5
6
7
8
9

方法二：watch（深度监听）

// 当路由发生变化的时候执行

watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

方法三：watch + methods

// 当路由发生变化的时候执行

watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

1
2
3
4
5
6
7
8
9
10
11

2. 跳转404页面

代码如下（示例）：

import ErrorPage from '@/views/ErrorPage.vue'
Vue.use(Router)
const routes=[
	// 其他就省略了
  {
    path: '/error',
    name: 'ErrorPage',
    component: ErrorPage,
  },
]
 
const router = new Router({
  mode: 'history',
  routes: routes
})
 
router.beforeEach((to, from, next) => {
  //  从其他地方访问是否有这个地址,没有的话就跳转去404页面
    if(to.matched.length == 0){
      from.path ? next({name: from.name}) : next('/error')
    }
    next();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

三、注意事项

1. 路由重定向的问题

• 假如在路由中，你设置了一个重定向：
  当你手动输入http://localhost:8080/order的时候，会主动重定向到http://localhost:8080/order/order-list

// 错误写法，当你刷新页面或者前往其他页面，并没有打印出你想要的东西

watch: {
        $route: {
            handler: function (val, oldVal) {
                console.log('路由信息:',val);
            },
            // 深度观察监听
            deep: true,
        }
    },

// 正确写法
watch: {
        $route: {
            // eslint-disable-next-line no-unused-vars
            handler: function (val, oldVal) {
                console.log('路由信息:',val);
            },
            // 深度观察监听
            deep: true,
            immediate:true    //immediate设为true后,则监听的这个对象会立即输出,也就是说一刷新页面就会在控制台输出
        }
    },  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 利用watch 监听，immediate: true；可以解决路由重定向问题，进到任一路由或者界面，都马上执行 ，就比如重定向路由后，不添加该属性为true,则有可能进行不了下一步操作