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 处理,谢谢!