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 屬性：