Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。

一、引入Vue Router

首先確保你的工程文件有vue router。

如果沒有的話，在項目文件夾打開命令行工具，輸入：

npm install vue-router --save

進行安裝。

接下來再 main.js中引入。

import VueRouter from ‘vue-router‘
Vue.use(VueRouter);

二、配置vue router

// 配置路由
const router = new VueRouter({
  routes:[
    {path:
 
‘/‘,component:Home},
    {path:‘/works‘,component:Works},
    {path:‘/about‘,component:About},
  ]
})

path 為路由地址；component 為需要前往的組件

所以在這之前我們需要引入組件：

import Home from ‘./Pages/Home/Home‘
import Works from ‘./Pages/Works/Works‘
import About from ‘./Pages/About/About‘

根據自己的文件夾目錄進行引入。

然後，把router再在ue中實例化：

new Vue({
  el: ‘#app‘,
  router,//這裏
  components: { App },
  template: ‘<App/>‘
})

三、使用

普通跳轉：

<a href="#">跳轉</a>

使用vue router：

<router-link to="/">主頁</router-link>

to裏面的地址和path相同。

------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------- vue router 進階 ----------------------------------------------

一、使用名字代替path地址：

在配置路由時添加 name 屬性。

const router = new VueRouter({
  routes:[
    {path:‘/‘,component:Home},
    {path:‘/works‘,component:Works,name:‘WorksLink‘},//添加name
    {path:‘/about‘,component:About},
  ]
})

跳轉改寫為：

<router-link :to="{name:‘WorksLink‘}">作品</router-link>

二、可以通過:to="數據名" 進行動態綁定

三、編程式導航

推薦用push 少用 replace

<template>
    <div>
        <h1>Works</h1>
        <button @click="goToPrev">前一頁</button>
        <button @click="goToSpec">特定頁</button>
        <button @click="goToByName">特定頁(通過名字跳轉)</button>
    </div>
</template>

<script>
export default {
    name: ‘Header‘,
    methods:{
        goToPrev(){
            this.$router.go(-1) //前一頁
        },
        goToSpec(){
            //this.$router.replace(‘/‘)
            this.$router.push(‘/‘);//指定頁
        },
        goToByName(){
            this.$router.push({name:‘WorksLink‘}) //通過名字指定
        }
    }
}
</script>

四、通配符跳轉

如果你嘗試訪問一個不存在的路徑時，我們可以設置，不存在路徑的路由

// 配置路由
const router = new VueRouter({
  routes:[
    {path:‘/‘,component:Home},
    {path:‘/works‘,component:Works,name:‘WorksLink‘},
    {path:‘/about‘,component:About},
    {path:"*",redirect:‘/‘} //默認跳轉
  ]
})

在最後添加path: ‘*‘ ，當訪問不存在的路徑時，會跳轉到redirect指定的路徑，這裏我們設置的是首頁。

五、History 模式

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

此時地址如圖：

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

改寫路由配置：

// 配置路由
const router = new VueRouter({
  routes:[
    {path:‘/‘,component:Home},
    {path:‘/works‘,component:Works,name:‘WorksLink‘},
    {path:‘/about‘,component:About},
    {path:"*",redirect:‘/‘} //默認跳轉
  ],
  mode: ‘history‘ //history模式
})

此時地址如圖：

Vue的中文文檔非常好，所以還是推薦看官方文檔。

Vue Router之路由基礎