Vue 路由的基本使用
目錄
Vue.js 路由
安裝
直接下載 / CDN
NPM
to
replace
append
tag
active-class
exact-active-class
event
Vue.js 路由
Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。
通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。
Vue.js 路由需要載入?vue-router 庫
中文文檔地址：vue-router文檔。
Vue Router 是?Vue.js?(opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：
嵌套的路由/視圖表
模塊化的、基于組件的路由配置
路由參數、查詢、通配符
基于 Vue.js 過渡系統的視圖過渡效果
細粒度的導航控制
帶有自動激活的 CSS class 的鏈接
HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為
安裝
直接下載 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
NPM
cnpm install vue-router
Vue.js + vue-router 可以很簡單的實現單頁應用。
Hello App!
js
// 0. 如果使用模塊化機制編程，導入 Vue 和 VueRouter，要調用 Vue.use(VueRouter)
// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
const Foo = { template: '
foo
' }const Bar = { template: '
bar
' }// 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
// 我們晚點再討論嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 創建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這么簡單著吧。
const router = new VueRouter({
routes // （縮寫）相當于 routes: routes
})
// 4. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 現在，應用已經啟動了！
to
表示目標路由的鏈接。 當被點擊后，內部會立刻把 to 的值傳到 router.push()，所以這個值可以是一個字符串或者是描述目標位置的對象。
replace
設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，導航后不會留下 history 記錄。
append
設置 append 屬性后，則在當前 (相對) 路徑前添加其路徑。例如，我們從 /a 導航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b
tag
有時候想要?
active-class
設置 鏈接激活時使用的 CSS 類名。可以通過以下代碼來替代。
exact-active-class
配置當鏈接被精確匹配的時候應該激活的 class。可以通過以下代碼來替代。
event
聲明可以用來觸發導航的事件。可以是一個字符串或是一個包含字符串的數組。
代碼設置了 event 為 mouseover ，及在鼠標移動到 Router Link 1 上時導航的 HTML 內容會發生改變。
NAT Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
