vue 动态设置页面标题
前言
提示:页面标题是由
提示:以下是本篇文章正文内容,下面案例可供参考
一、利用 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 有三个入参: