2021-05-21

---

前言

提示：页面标题是由 来控制的，因为 SPA 只有一个 HTML，所以当切换到不同的页面时，标题是不会发生变化的。必须通过 JavaScript 来修改 中的内容：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、利用 vue-router 组件的导航钩子 beforeEach 函数，在路由发生变化时，统一设置。

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.配置 vue-router

代码如下（示例）：

import VueRouter from 'vue-router';
...

//加载 vue-router 插件
Vue.use(VueRouter);

/*定义路由匹配表*/
const Routers = [{
    path: '/index',
    component: (resolve) => require(['./router/views/index.vue'], resolve),
    meta: {
        title: '首页'
    }
},
    //一次性加载
    // {
    //     path: '/index',
    //     component: require('./router/views/index.vue')
    // },
    {
        path: '/about',
        component: (resolve) => require(['./router/views/about.vue'], resolve),
        meta: {
            title: '关于'
        }
    },
    {
        path: '/article/:id',
        component: (resolve) => require(['./router/views/article.vue'], resolve)
    }
    ,
    {//当访问的页面不存在时，重定向到首页
        path: '*',
        redirect: '/index'
    }
]

//路由配置
const RouterConfig = {
    //使用 HTML5 的 History 路由模式
    mode: 'history',
    routes: Routers
};
//路由实例
const router = new VueRouter(RouterConfig);

//动态设置页面标题
router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
})

new Vue({
    el: '#app',
    router: router,
    render: h => h(Hello)
})

2.我们在路由匹配表中，为那些需要标题的页面，配置了 meta title 属性：

meta: {
        title: 'xxx'
}

3 然后在 beforeEach 导航钩子函数中，从路由对象中获取 meta title 属性，用于标题设置。beforeEach 有三个入参：