作為vue生態系統裡面的一大成員，vue-router主要負責vue中的頁面路由及其傳值問題。
1、基本使用–新增路由
基本使用主要包括四個部分，頁面引入、配置路由陣列、例項化路由、把例項化的路由加入vue的例項化中。如下，
//元件引入，主要有以下三種方式
const index = resolve => require(['./index'], resolve) //
元件非同步引入，不會打包到webpack的main.js裡面
import bar from '../bar' //
元件同步引入，會打包到webpack的main.js裡面
const foo = //
元件同步引入，會打包到webpack的main.js裡面
//配置路由陣列--路由真正的詳細配置
const routes =[ , ,
]//例項化路由
const router = new
vuerouter()
//在vue例項化中加入路由例項
newvue()
四步完成後，路由資訊就新增到整個vue例項中，可供全域性呼叫了。
而在路由的詳細配置中，還有很多資訊，下面看乙個相對詳細點的，
const routes =[}, ,
children: addressrouter
}]}, }]
}, }]
路由中主要涉及到的一些引數
item
value
name
路由標識
path
路由標識，路由路徑
component
實際元件
children
: 子路由
meta
: 附加資訊，可以包含一些諸如title的資訊
name和path很相似，都可以用來作為跳轉的標識，但有以下幾點不同
1) path最終會作為url的一部分，name不會。
2) path裡面可以做一些正則匹配，而name裡面一般不會新增正則來做更多的匹配。
2、宣告式路由與程式設計式路由 – 路由基本使用
引入路由之後，vue-router的使用也十分方便。主要由以下兩種方式
//宣告式路由
foofoo
//程式設計式路由
router.push(
})
兩種方式乙個用於template中，乙個用於script中，跳轉效果一致, 但相比而言router.push的形式靈活性更好一些。就像下面兩個一樣
下面以程式設計式路由詳細說一下
//程式設計式路由
router.push(
})
程式設計式路由主要有push、replace、go三中方法。
1）push、replace
這兩種方法主要接受兩類引數，
·路徑：name/path
·引數：params/query
name和path的區別上文已經提過。params和query兩個都是用來進行路由引數傳遞的，不同的是query傳遞的引數會以出現在url中的search部分，而params的則不會，其他基本一致。params和query可以同時傳遞，但一般沒啥必要。。。
2）go
go只接收乙個引數，就是數字~~。和history的go是一樣的，自行領會。
引數的接收和使用
上面說了傳參，下面看看怎麼接收和使用，很簡單
this.$route.query
this.$route.params
剛開始用的時候，注意別寫成router就好了。
下一部分再寫一下關於鉤子的使用、路由模式一些問題，這次到這吧。
vueRouter 路由基礎
一 重要概念 1 router是路由器 2 routes是一組路由 3 route某個路由 route.query route.params route.hash 後面的，包含 const router new vuerouter new vue 三 js方式跳轉傳參 使用name跳轉 this.r...
Vue Router引數使用
doctype html en utf 8 路由,重定向,引數傳遞 title vue.js script vue router.js script head 用router link導航,並傳引數 h3 方式1 passenger 李四 456788766554434567 router1 rou...
vue Router基本使用
在建立過程中，路由元件和普通元件是一模一樣的，使用方法不一樣。所有的路由配置放在一起應該是個陣列，單個的路由配置應該是個物件，物件中有很多固定的屬性 表示路由路徑，配置後可以去訪問對應的路由，並且將對應的元件顯示在 router view 中 表示路由元件的配置，和path一一對應，當匹配到對應的p...