首页 网络技术
  1. 正文

vue如何使用router.beforeEach来处理跳转前逻辑

使用 router.beforeEach 来处理跳转前逻辑

在某些情况下,我们需要在路由跳转前处理一些特定的业务逻辑,比如修改路由跳转、设置 title 等,代码如下:

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 首页const Home = (resolve => { require.ensure(['../views/home.vue'], () => {
resolve(require('../views/home.vue')) })})let base = `${process.env.BASE_URL}`;let router = new Router({ mode: 'history', base: base, routes: [
{
 path: '/',
 name: 'home',
 component: Home,
 meta: { title: '首页' }
}, ]})router.beforeEach((to, from, next) => { let title = to.meta && to.meta.title;
if (title) {
document.title = title; // 设置页面 title }
if (to.name === 'home') {
 // 拦截并跳转至 page2 单页,$openRouter 方法在第 5 节中封装
Vue.$openRouter({
 name: 'page2'
}); }
next();})export default router

注意最后需要调用 next() 方法执行路由跳转。

本文标题:vue如何使用router.beforeEach来处理跳转前逻辑
本文链接:https://www.qqooo.cn/post/6656.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!