接上文：vue實戰——自定義基礎路徑，端口號，繼續我們的實戰項目講解之旅。本文講解vue核心插件——vue router。

---

在本項目中，使用了vue-cli3.10創建的，所以默認帶了router，那么，這個router是怎么被vue使用的呢？任何插件首先得需要安裝。

1.安裝

npm install vue-router

然后我們在package.json中會發現router已經被依賴進來了。那么怎么引用呢？在單獨的模塊中使用：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

比如本項目中的文件在：

路由默認配置

然后，我們在main.js中對router進行引用掛載

main.js

它掛載到了app這個元素上了，我們知道這個app就是我們項目整體的根元素。因此以后我們就可以在頁面上進行路由配置了。

那么，在頁面上，是如何進行路由的呢，我們用：

Go to xxx

同時在上圖的路由文件中配置對應的xxx來進行路由導航。舉個栗子：

我們的默認首頁是App.vue：

我們在id=“nav"里加一個：

newAbout

如圖：

在router的index.js文件里加：

{

path: '/newAbout',

name: 'newAbout',

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

}

如圖(注意，這里是json格式，連接的逗號不要忘記)：

啟動項目

npm run dev

發現首頁上多了個導航：

以后，我們會根據這個方法添加屬于我們自己的導航菜單。

接下來，我們詳細多說說這個路由，我們發現路由頁面的下面配置了一個：

const router = new VueRouter({

mode: 'history',

base: process.env.BASE_URL,

routes

})

這個代碼，那么這個是什么意思呢？這個配置，說明了我們的路由采用的是HTML5 History 模式。這個模式是什么時候創建的呢？還記得我們用vue-cli3創建項目嗎？對，就是在那時候創建的。Vue使用vue-cli 3.10.0創建項目

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不過這種模式要玩好，還需要后臺配置支持。因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。

大家注意到了嗎，上面的base的值，就是我們之前文章說的自定義的環境變量。感興趣的同學，可以看我的之前的文章。有了base路徑，在跳轉的時候，就會自動加上這個路徑了。

然后我們再看下routes里的內容：

那么，這些配置是什么意思呢？下篇文章我們繼續分享。

---

原創不容易，鑒于本人水平有限，文中如有錯誤之處歡迎大家指正。以后我會持續發布vue實戰系列的文檔，喜歡的朋友歡迎關注。

總結

以上是生活随笔為你收集整理的iis vue history 配置_Vue实战——vueRouter路由的添加与配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。