npm install --save vue-router

vue create project_name
#Vue 會詢問你使用哪種配置
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features 

#請選擇 Manually select features,Vue會詢問你當(dāng)前項目需要哪些配置

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing   
#請將Router 選中,后面一系列的詢問按照實際情況進(jìn)行選擇就好

// src/router/index.js

import Vue from 'vue' // 引入Vue
import VueRouter from 'vue-router' // 引入VueRouter

// Vue支持VueRouter
Vue.use(VueRouter)

let router = new VueRouter() // 初始化VueRouter

new Vue({  
  router // 將VueRouter的實例對象配置到Vue實例化配置對象的router選項中
}).$mount('#app')

// src/main.js

import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

to="/home"   url="/home/user" 非嚴(yán)格匹配
to="/home"   url="/home/user/10086" 非嚴(yán)格匹配
to="/home"   url="/home"  嚴(yán)格匹配
to="/"       url="/order" / 是所有路由的根路由,所以他們非嚴(yán)格匹配

{
  path: string,
  component?: Component, // 當(dāng)前路由匹配時顯示的路由組件
  name?: string, // 命名路由
  redirect?: string | Location | Function, // 路由重定向
  props?: boolean | Object | Function,  // 
  alias?: string | Array<string>, // 路由別名
  children?: Array<RouteConfig>, // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void, //路由守衛(wèi)
  caseSensitive?: boolean, // 匹配規(guī)則是否大小寫敏感？(默認(rèn)值：false)
}

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home'
import Order from './views/Order'
import User from './views/User'

// Vue支持VueRouter
Vue.use(VueRouter)

let router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/order',
      component: Order
    },
    {
      path: '/user',
      component: User
    }
  ]
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app')       

// 導(dǎo)航指定的url
<router-link to="/home">主頁</router-link>
<router-link to="/order">訂單</router-link>
<router-link to="/user">用戶</router-link>
/* 導(dǎo)航指定的location
vue router中l(wèi)ocation對象的常用屬性{
    path:'/', //指定跳轉(zhuǎn)路由的路徑
    hash:'#top' // 指定跳轉(zhuǎn)路由的哈希值 
    name: 'Home', // 指定跳轉(zhuǎn)的具名路由的name值
    params: {}, // 指定跳轉(zhuǎn)的路由傳遞params對象
    query: {} //  指定跳轉(zhuǎn)的路由傳遞query鍵值對
}
*/
<router-link :to="{path:'/user'}">user</router-link>
// 使用location進(jìn)行頁面跳轉(zhuǎn)時,當(dāng)前l(fā)ocation的params屬性無法傳遞給路由組件的
<router-link :to="{path:'/user',hash:'#top',params:{id:1,name:'小明'}}">user</router-link>
// 使用name路由導(dǎo)航,可以向任何具名路由傳遞params
<router-link :to="{name:'User',hash:'#top',params:{id:1,name:'小明'}}">user</router-link>
// query支持 name導(dǎo)航和path導(dǎo)航,不推薦傳遞對象屬性時使用query傳參
<router-link :to="{name:'User',hash:'#top',query:{id:1,name:'小明'}}">user</router-link>

// 使用替換的形式跳轉(zhuǎn)路由
<router-link class="tab-item" replace to="/user">用戶</router-link>

// 如果當(dāng)前瀏覽器url /order
// 點擊 Gec 會跳轉(zhuǎn)到 /order/gec
<router-link  to="gec" append>Gec</router-link>
// 點擊 Gec1 因為Gec1的to不是相對路徑 append就會無效,路由會跳轉(zhuǎn)到 /gec
<router-link  to="/gec" append>Gec1</router-link>
// 點擊 Gec2 沒有append 會跳轉(zhuǎn)到 /gec
<router-link  to="gec">Gec2</router-link>

// 將router-link以span元素渲染到頁面上
<router-link tag="span" class="tab-item" to="/">主頁</router-link>

// 當(dāng)前router-link非嚴(yán)格匹配時class名為aaaa
<router-link  active-class="aaaa" to="/order">訂單</router-link>

// 雙擊 和 點擊都能觸發(fā)當(dāng)前元素的路由跳轉(zhuǎn)
<router-link :event="['dblclick','click']"  to="/">主頁</router-link>

<transition name="fade">
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>