如何在vue中使用vue-router?
1.Vue使用插件,即调用Vue的use方法;
// router.js
Vue.use(Router);
2.实例化router,并配置router的配置对象,含routes路由;
// router.js
export default new Router({
mode:"hash",
routes:[
{
path:"/hello",
component:HelloWorld
},
{
path:"/",
component:VuexTest
},
{
path:"/form",
component:Form
}
]
})
3.在vue实例上配置router实例;
// main.js
import router from "./config/router";
new Vue({
router,
render: h => h(App),
}).$mount('#app')
4.使用
<template>
<div id="app">
<router-link to="/">home</router-link>|
<router-link to="/form">form</router-link>|
<router-link to="/hello">HelloWorld</router-link>
<router-view></router-view>
</div>
</template>
5.效果
点击home,form,helloWorld可以切换路由页面。
以上的几个步骤,vue-router内部都做了什么?
我们需要明白的是,router-link和router-view是两个Vue全局组件,必定是在vue-router中实现了全局定义两个组件,他们分别用来跳转路由和展示路由对应的组件内容。
我们点击了router-link时导致路由变了,vue-router内部必然是在监听路由变化,根据路由规则找到匹配的组件,然后在router-view中渲染。
所以,路由切换最终是页面的不同组件的展示,而没有真正去刷新页面。
那么接下来说vue-router核心实现原理:
目标:
1.实现一个静态install方法,因为作为插件都必须有这个方法,给Vue.use()去调用;
2.可以监听路由变化;
3.解析配置的路由,即解析router的配置项routes,能根据路由匹配到对应组件;
4.实现两个全局组件router-link和router-view;(最终落地点)
核心代码实现简版:
let Vue;
class KVueRouter {
constructor(options){
this.$options=options;
this.$routerMap={};//{"/":{component:...}}
// url 响应式,当值变化时引用的地方都会刷新
this.app = new Vue({
data:{
current:"/"
}
});
}
// 初始化
init(){
// 监听事件
this.bindEvent();
// 解析路由
this.createRouteMap();
// 声明组件
this.initComponent();
}
bindEvent(){
window.addEventListener('hashchange',this.onHashchange.bind(this));
}
onHashchange(){
this.app.current = window.location.hash.slice(1) || "/";
}
createRouteMap(){
this.$options.routes.forEach(route=>{
this.$routerMap[route.path]=route;
})
}
initComponent(){
Vue.component('router-link',{
props:{
to:String,
},
render(h){
return h('a',{attrs:{href:'#'+this.to}},[this.$slots.default])
}
});
Vue.component('router-view',{
render:(h)=>{
const Component = this.$routerMap[this.app.current].component;
return h(Component)
}
});
}
}
// 参数是vue构造函数,Vue.use(router)时,执行router的install方法并把Vue作为参数传入
KVueRouter.install = function(_vue){
Vue = _vue;
//全局混入
Vue.mixin({
beforeCreate(){//拿到router的示例,挂载到vue的原型上
if (this.$options.router) {
Vue.prototype.$router=this.$options.router;
this.$options.router.init();
}
}
})
}
export default KVueRouter;
解读如下:
-
Vue.use(Router)时,会调用router的install方法并把Vue类传入,混入beforeCreate方法,即在Vue实例化后挂载前在vue原型上挂个$router方法(因为这样后面才能用this.$router.push()...但此处没有实现哦),然后调用router实例的init方法;
-
在init中把三件事情都干了,监听路由,解析路由(路由mapping匹配),定义组件;
-
需要注意的是,存储当前路由的变量this.app.current非一般的变量,而是借用Vue的响应式定义的,所以当路由变化时只需要给这个this.app.current赋值,而router-view组件刚好引用到这个值,当其改变时所有的引用到的地方都会改变,则得到的要展示的组件也就响应式的变化了。
而vue实例data下的属性为什么会是响应式的?如何实现的?请关注后续vue响应式原理的博文!
网友评论