vue中怎样实现 路由



路由，也称为路由守卫，主要分为全局守卫和局部守卫两种类型。

全局守卫通常被定义在路由配置文件中，每当路由发生变化时，都会执行相应的守卫逻辑。例如：

// 在进入页面之前执行

router.beforeEach((to, from, next) => { // ... })

// 在进入页面之后执行

router.afterEach((to, from) => { // ... })

局部守卫则是在具体的Vue组件内部定义，只对当前组件生效。其写法与Vue生命周期函数相似，包括：

beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被确认前调用 // 不能获取组件实例`this` // 因为当守卫执行前，组件实例还没被创建 }

beforeRouteUpdate(to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径`/foo/:id`，在`/foo/1`和`/foo/2`之间跳转时， // 由于会渲染同样的`Foo`组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例`this` }

beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例`this` }

对于更详细的使用方法，可以参考Vue Router的官方文档。