beforeEach 我們以前用過，這里就不寫了

beforeEnter 可以針對單個路由進行守衛

組件內守衛：

這里我們測試下beforeRouteEnter 組件內守衛：

Index.vue

<template><div><p>index pager</p><ul><li v-for="(course,index) in courses" :key="index">{{course}}</li></ul></div> </template><script> export default {methods: {setData(courses) {this.courses = courses;},},beforeRouteEnter(to, from, next) {let coures = [];console.log("我即將進入路由的導航鏈接。。。");setTimeout(() => {coures = ["soft", "vue", "css"];next((vm) => {//將課程列表設置進去！vm.setData(coures);});}, 2000);},data() {return {//這里數組，我不想在組件中獲取， created ,mounted 方法中獲取，我想在路由的級別獲取！// 這個時候，就用到了路由鉤子 beforeRouteEnter beforeRouteUpdate 方法courses: [],};}, }; </script><style lang="scss" scoped> </style>

效果沒有任何問題，這

總結

以上是生活随笔為你收集整理的路由守卫gogo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。