vue+webpack項目動態設置頁面title的方法

一、首先看一下webpack中如何設置頁面的title

1、webapck主要是利用HtmlWebpackPlugin 替換 html頁面 的 title，在vue項目中，安裝HtmlWebpackPlugin插件

npm install html-webpack-plugin --save-dev

安裝成功後，package.json 這個文件會多出一行 "html-webpack-plugin":"xxxx",

2、在webpack配置的plugins中實例化插件，設置標題名稱就可以了

new HtmlWebpackPlugin({
       template: './src/index.ejs',
       filename: './index.html',
       title: "標題名稱",
       favicon: "",
       inject: false,
       hash: true
})

上面介紹的是在webpack中設置標題的基本用法

 

二、動態設置頁面title

1、安裝依賴，使用vue-wechat-title插件

npm install vue-wechat-title -save

2、在main.js中引入

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

3、在router對應的js路由上加上對應title的參數

4、然後在我們的入口文件index.vue或者app.vue裏面去實現它

5、如果是公共組件，在跳轉時根據條件來動態設置title，可以在最外層的div上設置v-wechat-title="$route.meta.title"再動態去改變title即可

npm run dev重啓項目即可， 好啦  一個動態的title就生成啦

 

交流

可添加qq羣共同進階學習： 進軍全棧工程師疑難解  羣號:   856402057

對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！歡迎關注公衆號共同學習。