最近用vue來做一個項目，到結尾的時候發現一個問題：不管開的是哪個組件的路由地址，網頁的title都是index.html裏面的title。下面總結一下解決的辦法：

原先我使用的是document.title =to.meta.title來改變網頁標題。

大家都知道使用Vue框架開發的應用是個單頁面應用，裏面用到的是路由的形式，並不像多頁應用開發那樣（下面附帶區別）。所以想讓網頁的標題隨著路由的改變而改變可以使用下面這個方法，目前已解決。

第一步：找到 router 文件夾下的index.js文件，在此引入：

第二步：在同文件下面的路由裏面配置每個路由的地址：

第三步：在main.js 中寫入以下代碼去遍歷每一個meta裏面設置頁面的title名字：

最後：這樣就可以給每個路由對應的頁面設置上了title，但是在我使用過程中遇到了個小問題。

如果頁面跳轉時要通過傳參數去選擇顯示的子組件的話，這個方法實現不了，

我需要通過是否傳tab=3去實現跳轉的時候顯示的是個人中心tab還是我的學習tab。這樣title就不會變

這就有了下面這第二個方法：

在vue2中還可以使用vue-wechat-title插件來解決頁面title的問題

第一步：在項目根目錄下打開命令行通過npm install vue-wechat-title --save來安裝插件，像下面這樣就安裝成功了

第二步：同上面的方法一樣，在路由裏面配置的每個地址加上對應的title；

第三步：在 main.js 中引入並使用插件就可以了

第四步：在src目錄下的app.vue中修改router-view，加入下面的這個組件

如果以上這些都操作都完成了之後，重新加載一下你的頁面應該就可以看到你設置的相應的title了~

以上是總結自己在項目中遇到的問題，當成日後的筆記來看、希望對大家有所幫助。寫得稍微婆媽、大牛勿噴謝謝~

vue設置路由title，實現在vue路由發生變化的時候，相應的頁面title隨之變化