使用步驟
當(dāng)我們使用 vue/cli 創(chuàng)建項(xiàng)目的時(shí)候選擇上Router，會(huì)自動(dòng)安裝 Vue Router 插件奈惑，并且生成 Vue Router 的基礎(chǔ)代碼結(jié)構(gòu)
-
注冊(cè)路由 Vue.use 是用來(lái)注冊(cè)插件封断，它需要接收一個(gè)參數(shù)尸曼，它會(huì)調(diào)用傳入對(duì)象的 install 方法
Vue.use(Router) -
路由規(guī)則
const routes = [ { path:'', name:'', component:'' }, ] -
創(chuàng)建路由對(duì)象 （創(chuàng)建路由時(shí)把路由規(guī)則傳進(jìn)來(lái)）
const router = new VueRouter({routes}) -
導(dǎo)出路由對(duì)象
export default router -
注冊(cè) router 對(duì)象八回，在 main.js 中導(dǎo)入創(chuàng)建好的router毫深，然后在創(chuàng)建 Vue 實(shí)例的過(guò)程中注冊(cè) router 對(duì)象
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ // 3. 注冊(cè) router 對(duì)象 router, render: h => h(App) }).$mount('#app')在創(chuàng)建 Vue 實(shí)例的時(shí)候如果我們配置路由選項(xiàng)（注冊(cè) router 對(duì)象）吩坝，此時(shí)會(huì)給 Vue 實(shí)例注入兩個(gè)屬性
router（路由對(duì)象）哑蔫，我們通過(guò)路由對(duì)象可以調(diào)用一些相應(yīng)的方法 proto（如：push钉寝、back弧呐、go 等等）也可以通過(guò) currentRoute查看當(dāng)前路由規(guī)則。
創(chuàng)建路由組件占位符 在 App.vue 中我們會(huì)創(chuàng)建一個(gè) <router-view/> 作為組件的占位符嵌纲，當(dāng)路徑匹配到一個(gè)組件之后會(huì)把這個(gè)組件加載進(jìn)來(lái)并且替換掉 <router-view/>
通過(guò)router-link創(chuàng)建鏈接
