class
vuerouter
=options;
// 監聽當前頁面的hash值的切換
// 當第一次解析頁面時，會有乙個預設的hash值
/// 迴圈遍歷routes,把path和component重新放入乙個新的物件中
// this
.routemap = routes.
reduce
((prev,next)
=>,)
;//
// this ==> vuerouter的例項，也是每乙個元件上的_router
vue.util.
definereactive
(this
.route=
,'path'
,"/");
window.
addeventlistener
("load",(
)=>
) window.
addeventlistener
("hashchange",(
)=>)}
}//在vuex注入了$store,在路由注入_router
vuerouter.
install
=function
(_vue)
else
// 給每乙個例項新增$route屬性，
object.
defineproperty
(this
,"$route",}
);// 註冊兩個內建元件
// router-link router-view
// 註冊全域性元件
"/home"
>
<
/router-link>
let child =
vue.
component
("router-link",,
// template:"
",render
(createelement)
,首頁)
// render : 渲染函式
// render: 將虛擬dom可以轉成真實的dom；這個函式返回什麼，那麼最終router-link就渲染成什麼
// this==> 當前的元件例項
// return + 元件；可以把元件渲染成乙個真實的dom；
// return h(child);
// return
// $slots
return
>
this
.$slots.
default
<
/a>}}
);// router-view : 根據頁面的hash值顯示對應的元件
vue.
component
("router-view",}
)}})
};let router=
newvuerouter()
let vm =
newvue(}
)export
default vuerouter;
基礎 vue router實現子路由
例子一 index.js import vue from vue import router from vue router import helloworld from components helloworld import first from components first import ...
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基礎使用
作為vue生態系統裡面的一大成員，vue router主要負責vue中的頁面路由及其傳值問題。1 基本使用 新增路由 基本使用主要包括四個部分，頁面引入 配置路由陣列 例項化路由 把例項化的路由加入vue的例項化中。如下，元件引入，主要有以下三種方式 const index resolve requ...