vue專案在初始化時可以自主安裝路由，如果當時沒有安裝的話，就需要在初始化之後進行配置，本文將講解如何配置vue路由。

首先建立一個專案，路由安裝選擇no。

然後用pycharm或者其他IDE工具開啟這個專案，開啟專案後不要急於執行，我們先配置一下專案執行的快捷方式。

紅框內的刪除

然後開始安裝路由。

npm i vue-router -s

下一步註冊vue路由，在src目錄下新建一個檔案件routers，在routers目錄下新建檔案index.js，在index.js中寫入下面的程式碼。

import Vue from "vue"import Router from "vue-router"Vue.use(Router);export default new Router({ mode:"history", routes:[ ]})

下一步將路由物件註冊到main.js中，加上下來兩行文字。

然後在APP.vue中將路由檢視新增到模板上，並建立一個home模板測試。

<template> <div class="home"> 這裡是首頁 </div></template><script>export default { name: 'Home', data () { return { msg: '' } }}</script><style scoped></style>

紅線標註的是後面新增的內容，然後執行專案成功。

再新建一個使用者元件測試一下。

新元件測試成功，有了路由之後，每次有新的元件，只要在路由中新註冊一個url就可以瀏覽器中訪問了。

下面我將介紹vue路由的兩個實用功能，頁面跳轉和獲取url引數。

在Home.vue中新增如下程式碼

<router-link to="/user"></router-link>

開啟/user可以做到無重新整理跳轉，在原有的程式碼中繼續修改

<router-link to="/user?num=100">使用者中心</router-link>

在user.vue新增：

<template> <div> 這裡是使用者元件 {{$route.query.num}} </div></template>

再次訪問使用者元件得到這樣的結果。

頁面跳轉使用的是this.$router物件，這個物件相當於是原生js中的location物件，除了可以在html頁面跳轉，在js中使用this.$router.push()也可以實現頁面跳轉，手機url引數使用的this.$route物件，除了可以手機查詢字串引數外，還可以收集url引數。