-
后端路由：對於普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源，這個對應關系就是后端中的路由；
-
前端路由：對於單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；
-
在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於后端路由）；
#后邊的內容 稱為哈希（Hash）
在 vue 中使用 vue-router
-
導入 vue-router 組件類庫：
<!-- 1. 導入 vue-router 組件類庫 -->
<script src="./lib/vue-router-2.7.0.js"></script>
-
使用 router-link 組件來導航（默認渲染為a標簽。使用tag屬性來設置要渲染成什么類型的元素）
<!-- 2. 使用 router-link 組件來導航 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊</router-link>
-
使用 router-view 組件來顯示匹配到的組件
<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>
-
創建使用
Vue.extend創建組件 // 4.1 使用 Vue.extend 來創建登錄組件 var login = Vue.extend({
template: '<h1>登錄組件</h1>'
});
// 4.2 使用 Vue.extend 來創建注冊組件
var register = Vue.extend({
template: '<h1>注冊組件</h1>'
});
-
創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
// 5. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
-
使用 router 屬性來使用路由規則
// 6. 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
router: router // 使用 router 屬性來使用路由規則
});
理解：點擊鏈接，修改url地址，路由監聽到url地址改變后，進行路由規則匹配，匹配到后通過router-view來顯示對應組件。