-----2019-08-09補更新-----
hash模式與history模式
hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀取；
特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。
hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如 http://www.xxx.com，因此對於后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。
history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。
history 模式下，前端的 URL 必須和實際向后端發起請求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。
Vue-Router 官網里如此描述：“不過這種模式要玩好，還需要后台配置支持……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。”
1.直接在js中引入vue-router的cdn，並且不使用vue-cli、單文件組件等的方式，即最簡單的路由實現，但是功能似乎大部分都齊了，
比較簡單，所以直接上代碼，已經測試過能夠正常運行~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello !</h1>
<p>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/hash1">切換至com1</router-link>
<router-link to="/hash2">切換至com2</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
<!-- router-link上的其他屬性： -->
<!-- 設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，導航后不會留下 history 記錄。 -->
<!-- <router-link :to="{ path: '/abc'}" replace></router-link> -->
<!-- 有時候想要 <router-link> 渲染成某種標簽，例如 <li>。 於是我們使用 tag prop 類指定何種標簽，同樣它還是會監聽點擊，觸發導航。 -->
<!-- <router-link to="/foo" tag="li">foo</router-link> -->
<!-- active-class 設置 鏈接激活時使用的 CSS -->
<!-- event 聲明可以用來觸發導航的事件。可以是一個字符串或是一個包含字符串的數組。 -->
</div>
</body>
<script>
// 1. 定義（路由）組件。
const com1 = { template: '<div>路由1</div>' } const com2 = { template: '<div>路由2</div>' } // 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是 通過 Vue.extend()
// 創建的組件構造器， 或者，只是一個組件配置對象.
const routes = [ { path: '/hash1', component: com1 }, { path: '/hash2', component: com2 } ] // 3. 創建 router 實例，然后傳 `routes` 配置
const router = new VueRouter({ routes // （縮寫）相當於 routes: routes
}) // 4. 創建和掛載根實例。
// 要通過 router 配置參數注入路由，從而讓整個應用都有路由功能
const app = new Vue({ router }).$mount('#app');//el是自動掛載，mount是手動掛載（延時）
</script>
</html>
2.使用vue-cli構建：
Vue init webpack <demoname>，然后注意在router項中選yes。
在src/router/index.js中進行路由的配置，在components文件夾下存儲路由出口的組件
在app.vue中設定router-link、router-view（用法在上面提到了）
在main.js中全局注冊組件以及掛載實例
這個例子中只有三個路由出口，helloworld、comA以及comB
index.js
import Vue from 'vue'
//引入router
import Router from 'vue-router'
//加載路由的出口，即組件
import HelloWorld from '../components/HelloWorld' import comA from '../components/comA.vue' import comB from '../components/comB.vue' import hw from '../components/HelloWorld.vue' Vue.use(Router) //也可以在上面配置路由然后導出routes
export default new Router({ routes: [ { path:'/', name:'hw', component:hw }, { path:'/hash1', name:'comA', component:comA }, { path:'/hash2', name:'comB', component:comB } ] })
注意routes中路由對象的component屬性不能是字符串格式哦
main.js:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import App from './App' import router from './router' import comA from './components/comA' import comB from './components/comB' import hw from './components/HelloWorld' //全局注冊組件 Vue.component('comA',comA); Vue.component('comB',comB); Vue.component('hw',hw); Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
App.Vue：
<template>
<div id="app">
<img src="./assets/logo.png">
<div class="container">
<ul>
<li v-for="(com) in coms" :key="com.routerName">
<router-link :to="{ name:com.routerName }"> To {{ com.routerName }} </router-link>
</li>
</ul>
</div>
<div class="output">
<router-view></router-view>
</div>
</div>
</template>
<script> import helloWorld from './components/HelloWorld' import comA from './components/comA' import comB from './components/comB' import hw from './components/HelloWorld' export default { name: 'App', data(){ return { coms:[{ routerName:'comA', name:'comA' }, { routerName:'comB', name:'comB' },{ routerName:'hw', name:'hw' }] } }, components:{ comA, comB } } </script>
<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
在默認采用的hash模式下，vue-router的工作流程是當渲染出來的<a>（或者使用tag屬性更改的其他標簽）被點擊時，根據其to屬性決定前往的組件，同時將path屬性添加到url后（多個#）
如果明天面試沒過就回來把嵌套路由啊啥的給寫了
----果然沒過，栽在了正則表達式上，先補一下正則----