什麼是路由
- 後端路由:對於普通的網站,所有的超鏈接都是URL地址,所有的URL地址都對應服務器上對應的資源;
- 前端路由:對於單頁面應用程序來說,主要通過URL中的hash(#號)來實現不同頁面之間的切換同時,hash有一個特點:HTTP請求中不會包含hash相關的內容;所以,單頁面程序中的頁面跳轉主要用hash實現。
- 在單頁面應用程序中,這種通過hash改變來切換頁面的方式,稱作前端路由(區別於後端路由)。
路由的安裝
(兩種方式:https://router.vuejs.org/zh-cn/installation.html)
導入vue和 vue-router的包即可。
路由的基本使用
1. 導入 vue-router 組件類庫(先導入vue.js)
2. 使用 router-link 組件來導航(可選項,使用router-link實現點擊跳轉)
<router-link to="/login">登錄</router-link><router-link to="/register">註冊</router-link>
也可以用<a>
<a href="#/login">登錄</a>
<a href="#/register">註冊</a>
3. 使用 router-view 組件來顯示匹配到的組件(相當於在html中的一個佔位符,路由的內容就放在這裏)
<router-view></router-view>
4. 創建使用`Vue.extend`創建組件
var login = {
template: '<h1>登錄組件</h1>'
};