vue視訊教程系列第三十四節—mode屬性的作用

摘要： mode屬性的作用： 我們在做了這麼多vue小案例後，發現位址列裡總是有一個”#”。那我們有沒有辦法去掉這個可惡的“#”呢？想去掉“#”，需要設定router.js。我們來到router.js裡 設定mode: “history”,再來看一下頁面，發現“#”消失。嗯，達到目的了。 ...

mode屬性的作用：

我們在做了這麼多vue小案例後，發現位址列裡總是有一個”#”。那我們有沒有辦法去掉這個可惡的“#”呢？想去掉“#”，需要設定router.js。我們來到router.js裡

設定mode: “history”,再來看一下頁面，發現“#”消失。嗯，達到目的了。

Mode屬性還有另一個值，就是hash。當我們將值改成hash裡，可以看到位址列裡的“#”又出現了。

mode屬性的屬性值：

mode:”history” => 位址列裡的“#”消失；

mode:”hash” => 位址列裡的“#”出現，這也是不設定mode的預設值

完整程式碼：

<pre>

export default new Router({
mode: "history",
routes: [
{
path: '/home',
name: 'home',
component: Home
}
]
})

</pre>

404頁面的處理：

當我們上網的時候，如果輸入錯誤的頁面的時候，通常會出現一個404錯誤頁，這也提升了網站的使用者體驗。那麼我們在專案開發的時候如何處理404頁面呢？

實現在404錯誤處理頁面的步驟：

第一步：建立一個Error.vue這個元件

第二步：在router.js裡設定路徑等：

（1） 引入404頁面：import Error from './views/Error.vue'

（2） 設定：

<pre>

{
path: '*',
name: 'error',
component: Error
}

</pre>

當我們在位址列輸入錯誤路徑時，就會顯示404頁面了。雖然是一個小小的舉動，但對於訪問網站的使用者來說，會大大提升網站的體驗值的，所以它的價值是很大。

網路上會有很多很漂亮很有創意的404頁面，我們可以去參考一下，美化一下我們的404頁面，會讓訪問錯誤地址的使用者的情緒放松下來。