vuerouter实现的原理,vue-router的工作原理
本文主要介绍了vue路由器的原理，并实现了一个小型演示。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
插件编写的基本方法需求分析我们先来看看使用vue-router的步骤，那么我们来看看vue-router内部都做了些什么。首先，让我们看看如何在组件上安装$router，以及如何实现这两个路由组件。首先，让我们看看router-link的完整演示代码摘要。
插件编写的基本方法
建议大家先看看官方的插件用法和开发方法。
https://vuejs.bootcss.com/guide/plugins.html
需求分析
我们先看看vue-router的使用步骤
1.use
Vue.use(VueRouter)
注意：
Vue.use()主要调用插件内部的install方法，并将Vue实例作为参数传入。
2.new 一个router实例
const router=new VueRouter({
//实例化路由器传入的参数
模式：“历史”，
base: process.env.BASE_URL，
路线
})
3.new Vue() ，把实例放在vue的配置项里面
新Vue({
Router，//注意router的实例也被传入。
render: h=h(App)
}).$ mount(“# app”)
4.使用路由组件router-view/、router-link/router-link或使用此。组件中的router
由此我们看看vue-router内部做了什么？
全局挂载$router实现并声明了两个组件：router-view/和router-link/router-link。
实现思路
首先我们看看如何将$router挂载到组件上
让Vue//保存vue的构造函数，避免打包输入。
Vue router . install=function(_ Vue){
Vue=_ Vue
console.log(options ，Vue。$ options)；
Vue.mixin({
创建之前(){
console.log(inner ，this)；
console.log( this。$options.router ，这个。$ options . router)；
如果(这个。$options.router) {
Vue.prototype.$router=this。$ options.router
}
},
});
console . log( end )；
};
可以看到：
1.第一次执行时，也就是在Vue.use(Router)中，Vue还没有实例化(因为Vue.use()发生在new Vue()之前)，所以Vue.$option本身无法获取(ps:选项是new Vue()时传入的参数，Router也传入)。
2.我们可以在使用的时候做一个全局混进，在适当的时间点，在Vue根实例的配置项中获取路由器实例，挂载它。然后，当new Vue()的根实例被创建时，路由器实例被注入，所以当全局mixin的生命周期被执行时，配置项this。根实例的$options已经包含路由器实例，此时路由器可以挂载到Vue的原型上。之后，Vue扩展的所有Vue实例都可以通过这个访问这个属性。$路由器。
如何实现那两个路由组件
让我们先看看路由组件是如何使用的。
div id=应用程序
div id=nav
！-标签控制跳转-
路由器链接到=/ Home/路由器链接
路由器链接到=/about about/路由器链接
/div
！-路由出口-
路由器-视图/
/div
从上面可以看出，点击router-link相当于点击了A标签，然后A标签的href属性控制页面路由发生变化；监控路由变化，然后在路由器视图中输出不同的模板；
先来看看router-link
VueRouter类{
构造函数(选项){
//接受传入的参数
这个。$ options=options
const initial=/；
//将电流转化为响应数据，
//所以在hashchange的回退中修改curent时，
//使用current的router-view的渲染功能将被重新渲染。
Vue.util.defineReactive(this， current ，initial)；
//侦听路由更改
window . addevent listener( hashchange ，()={
//获取当前url中的哈希
this . current=window . location . hash . slice(1)；
});
}
}
Vue router . install=function(_ Vue){
Vue=_ Vue
Vue.component(路由器视图，{
渲染(h) {
//获取当前路线对应的组件，然后渲染。
const { current，$options }=this。$路由器；
//注意这里我们的传入路由是一个路由表，如下图1所示。
//所以这里我们是找出匹配到当前目前的路由的项，然后直接渲染组件
const route=$ options。路线。查找((项目)={
返回item.path===当前
});
让组件=路由？路线。组件：空；
返回h(分量);
},
});
}
再来看看路由器视图
武鲁特类{
构造函数（选项){
//接受传入的参数
这个10.95 $ options=期权
const initial=/；
//将目前的变成响应式数据，
//这样在哈希变换的回掉中修改输电网研究中心时，
//用到目前的的路由器视图的提出函数就会重新渲染
Vue.util.defineReactive(this， current ，initial)；
//监听路由变化
窗户。addevent侦听器( hashchange ，()={
//获取当前全球资源定位器(统一资源定位器)中的混杂
这个。当前=窗口。位置。哈希。切片(1)；
});
}
}
Vue路由器。install=function(_ Vue){
Vue=_ Vue
Vue.component(路由器视图,{
渲染(h) {
//获取当前路由所对应的组件，然后把它渲染出来
const { current，$options }=this .$路由器；
//这里要注意我们传进来的路线是一个路由表，如下图一
//所以这里我们是找出匹配到当前目前的路由的项，然后直接渲染组件
const route=$ options。路线。查找((项目)={
返回item.path===当前
});
让组件=路由？路线。组件：空；
返回h(分量);
},
});
}
不能直接在install方法里面挂载；
完整demo代码
//我们要实现什么
//1、插件
//2、两个组件
//保存某视频剪辑软件的构造函数，避免打包将其打进去
让某视频剪辑软件
武鲁特类{
构造函数（选项){
这个10.95 $ options=期权
const initial=/；
Vue.util.defineReactive(this， current ，initial)；
这个。current=/；
窗户。addevent侦听器( hashchange ，()={
//获取当前全球资源定位器(统一资源定位器)中的混杂
这个。当前=窗口。位置。哈希。切片(1)；
});
}
}
//参数一在Vue.use()调用时传进来，
Vue路由器。install=function(_ Vue){
Vue=_ Vue
console.log(options ，this)；
//全局混入
//目的：延迟下面的逻辑到路由器创建完毕并且附加到选项上时才执行
Vue.mixin({
//在每个组件创建实例时都会执行
创建之前(){
//这个. options .路由器即新某视频剪辑软件时放进去的路由器实例
如果（这个. options.router) {
Vue.prototype.$router=this .$ options .路由器
}
},
});
//注册并且实现两个组件
Vue.component(路由器链接,{
道具：{
收件人：{
必填：真，
},
},
渲染(h) {
返回h(
一个，
{
属性：{ href: # this.to }，
},
这个. slots.default
);
},
});
Vue.component(路由器视图,{
渲染(h) {
//获取当前路由所对应的组件，然后把它渲染出来
const { current，$options }=this .$路由器；
const route=$ options。路线。查找((项目)={
返回item.path===当前
});
让组件=路由？路线。组件：空；
返回h(分量);
},
});
};
导出默认武鲁特
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。