使用vue-router為每個路由配置各自的title
更新時間：2018年07月30日 10:45:58 作者：detectiveHLH
這篇文章主要介紹了如何使用vue-router為每個路由配置各自的title,及使用vue router的方法，需要的朋友可以參考下
傳統(tǒng)方法
以前在單頁面路由中，就只能在html文件中定一個固定的網站的title。如果想要動態(tài)的去修改，需要使用如下的方法。
document.title = '這是一個標題';
這樣會讓我們做很多無用功。顯得十分蠢。
使用Vue-Router的方法
首先打開/src/router/index.js文件。
找到如下代碼。
const vueRouter = new Router({
routes,
mode: 'history',
linkActiveClass: 'active-link',
linkExactActiveClass: 'exact-active-link',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
},
});
vueRouter只是一個變量名。叫什么可以根據(jù)你自己項目的命名來找，只要是Router實例化的一個對象就OK。然后將上述代碼替換成如下代碼。
const vueRouter = new Router({
routes,
mode: 'history',
linkActiveClass: 'active-link',
linkExactActiveClass: 'exact-active-link',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
},
});
vueRouter.beforeEach((to, from, next) => {
/* 路由發(fā)生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
代碼的邏輯就是在路由將要發(fā)生變化的時候，用傳統(tǒng)的方法來對每個將要跳轉到的路由的title進行修改。
配置路由
配置好了index.js之后我們就需要去給每個router配置自己的title了。例如。
{
path: '/',
name: 'Home',
component: () => import('@/views/Home/Home'),
meta: {
title: '首頁',
},
}
給每個路由加上一個叫meta的屬性。meta屬性里的屬性叫title，也就是每個路由獨特的title了。加上之后，瀏覽器里每個路由都會有自己設置好的title了。
總結
以上所述是小編給大家介紹的使用vue-router為每個路由配置各自的title，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:
相關文章
postcss-pxtorem設置不轉換UI框架的CSS單位問題
這篇文章主要介紹了postcss-pxtorem設置不轉換UI框架的CSS單位問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue中結合clipboard實現(xiàn)復制功能 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue實現(xiàn)商城秒殺倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了VUE項目中調用高德地圖的全流程講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中的模態(tài)對話框組件實現(xiàn)過程,通過template定義組件，并添加相應的對話框樣式，需要的朋友可以參考下2018-05-05
本篇文章主要介紹了vue-cli中的webpack配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了 vue-cli安裝使用流程,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
本篇文章主要介紹了Vue實現(xiàn)一個返回頂部backToTop組件，可以實現(xiàn)回到頂部效果，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了Vue關于訪問外鏈失敗的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3中Slot插槽透傳,二次封裝Arco的table組件詳解
這篇文章主要介紹了Vue3中Slot插槽透傳,二次封裝Arco的table組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04