vue router 组件的高级应用实例代码

2024-05-06 15:41:00

字体：大中小

来源：转载

供稿：网友

1 动态设置页面标题

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

window.document.title ='xxx'

有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中，通过 JavaScript 来修改 <title></title> 中的内容。这种方式固然可行，但如果页面很多，就会显著增加维护成本，而且修改逻辑都是一样的。有没有更好的方法呢？

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

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)})

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