vue添加頁面

1 創建vue文件

進入項目的components文件夾下，右鍵創建文件Dashboard.vue,跟着原始項目學吧，咱首字母也大寫。

打開HelloWorld，把里面的內容復制到新創建的DashBoard中。把data中對應的msg修改為dashboard，把name也修改為DashBoard

 

2 修改路由文件

打開route文件夾下index.js文件。

在開頭導入新創建的vue文件，其實是模塊。

import DashBoard from '@/components/DashBoard'

在routes數組中添加一個對象：

{
path: '/dashboard',
name: 'DashBoard',
component: DashBoard
}

此時保存訪問一下地址：http://localhost:8080/#/dashboard

訪問后發現出現上圖，則說明我們已經成功添加了頁面。但是會很×疼的發現地址欄目里多了個#號，好煩，怎么去掉。在router對象里添加屬性mode：‘history’

再次訪問http://localhost:8080/dashboard 發現#號沒了。

http://localhost:8080/

 

 

 

至此，頁面添加工作已經完成，此時你可能會想，能不能添加個超鏈接讓我自己直接跳轉，當然是可以的，隨后會演示。