Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應用變得易如反掌。包含的功能有：

嵌套的路由/視圖表
模塊化的、基于組件的路由配置
路由參數(shù)、查詢、通配符
基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
細粒度的導航控制
帶有自動激活的 CSS class 的鏈接
HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為

安裝

直接下載/CDN

在 Vue 后面加載 vue-router，它會自動安裝的：

<script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script>

通過npm安裝

npm install vue-router

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

import Vue from 'vue' import VueRouter from 'vue-router'Vue.use(VueRouter)

?注意：Vue項目在初始化的時候不要集成vue-router

構(gòu)建開發(fā)版

如果你想使用最新的開發(fā)版，就得從 GitHub 上直接 clone，然后自己 build 一個 vue-router。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install npm run build

使用

1.安裝并引入和明確使用

npm install vue-routerimport VueRouter from 'vue-router'Vue.use(VueRouter)

2.創(chuàng)建/定義路由

?

const router = new VueRouter({routes:[{path:"/",name:"HelloWorld",component:HelloWorld}]})

3.給出路由顯示的位置

?<router-view />

比如：

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 組件來導航. --><!-- 通過傳入 `to` 屬性指定鏈接. --><!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><router-view></router-view> </div>

4.將路由對象注入Vue實例

// 創(chuàng)建 router 實例，然后傳 `routes` 配置 // 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。 const router = new VueRouter({routes // (縮寫) 相當于 routes: routes })//? 創(chuàng)建和掛載根實例。 // 記得要通過 router 配置參數(shù)注入路由， // 從而讓整個應用都有路由功能 const app = new Vue({router }).$mount('#app')

6.路由跳轉(zhuǎn)

<p><!-- 使用 router-link 組件來導航. --><!-- 通過傳入 `to` 屬性指定鏈接. --><!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p>

完整演示

在線實例演示：

https://jsfiddle.net/yyx990803/xgrjzsup/

vue-router實例代碼：

https://github.com/vuejs/vue-router/tree/dev/examples

總結(jié)

以上是生活随笔為你收集整理的VueRouter的安装以及基本使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。