【Vue】13 VueRouter Part3 路由守卫

单页应用中，只存在一个HTML文件，网页的标签，是通过title标签显示的，我们在单页应用中如何修改？

JS操作：

window.document.title = "标签名称"

也许一两个没问题，但是我们的Vue组件越来越多，修改就难了

所以就需要路由守卫了

 

钩子函数：

beforeEach
afterEach

这两个函数用于路由改变的前后触发执行

 

在我们的index.js中配置meta对象，这是网页的元信息标签

import Vue from 'vue';
import VueRouter from "vue-router"; // 导入路由插件

import home from "../components/home";
import sample from "../components/sample";
import news from "../components/news";
import msg from "../components/msg";

Vue.use(VueRouter); //注入路由插件
const routes = [
    {
        path : '/home',
        component : home,
        meta : { title : "主页" },
        children : [ // 配置子路由
            { path : 'news/:id', component : news, meta : { title : "新闻页" }, },
            { path : 'msg', component : msg, meta : { title : "消息页" }, }
        ]
    },

    { path : '/sample', component : sample, meta : { title : "样本页" }, },
]; // 定义路由
const router = new VueRouter({ // 创建路由实例
    routes,
    mode : 'history'
});
export default router; // 导出路由实例

然后编写路由的钩子方法：

// 创建路由实例，使用路由守卫
router.beforeEach((to,from,next) => {
    // to 目标路由对象，from 当前路由对象，next该方法执行后进入
    window.document.title = to.meta.title;
    next();
});

效果：

或者设置统一的拦截处理

 

【Promise】

ES6的特性之一，是异步编程的一种解决方案

回调地狱问题：

A请求加载数据a并且包含下一个B请求

B请求加载数据b并且包含下一个C请求

C请求加载数据c并且包含下一个D请求

D请求加载数据d并且包含下一个E请求

如此往复：

程序可以正常执行，但是这代码快要起飞了

不好维护，写的难看。

 

未写完，暂停