日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 > 前端技术 > vue >内容正文

vue

使用vue-router设置每个页面的title

發(fā)布時間:2023/12/31 vue 28 豆豆
生活随笔 收集整理的這篇文章主要介紹了 使用vue-router设置每个页面的title 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

基本環(huán)境配置: webpack + vue2.0 + vue-router +nodeJS


進入 router 文件夾底下的index.js文件

首先引入:

import Vue from 'vue' import Router from 'vue-router'

然后在路由里面配置每個路由的地址:

routes: [{ /* (首頁)默認路由地址 */path: '/',name: 'Entrance',component: Entrance,meta: {title: '首頁入口'}},{ /* 修改昵稱 */path: '/modifyName/:nickName',name: 'modifyName',component: modifyName,meta: {title: '修改昵稱'}},{ /* 商品詳情 */path: '/goodsDetail',name: 'goodsDetail',component: goodsDetail,meta: {title: '商品詳情'}},{ /* Not Found 路由,必須是最后一個路由 */path: '*',component: NotFound,meta: {title: '找不到頁面'}}]

在每一個meta里面設(shè)置頁面的title名字,最后在遍歷

router.beforeEach((to, from, next) => {/* 路由發(fā)生變化修改頁面title */if (to.meta.title) {document.title = to.meta.title}next() })

這樣就為每一個VUE 的頁面添加了title

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的使用vue-router设置每个页面的title的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。