vue中路由的实现原理？

1、首先需要了解一下Vue路由分为两种，一种是哈希路由，其最明显的特征是URL地址带‘#’号的，其实对地址栏也就不怎么美观一点。其次是history路由也就是URL不带‘#’号的地址，也就是我们比较常见的地址。
2、为什么要了解Vue路由的实现原理呢？其实我们都知道Vue 构建的单页面应用，其实根据路由地址的不同渲染不同的组件，在无刷新的前提下进行组件切换，根据路由地址切换不同的组件
下面介绍一下简单的例子来了解Vue路由的实现原理
3、在介绍vue实现原理之前
首先来了解一下Vue中的哈希路由的实现原理，其实根本原理涉及到了BOM中的location对象，其中对象中的location.hash储存的是路由的地址、可以赋值改变其URL的地址。而这会触发hashchange事件，而通过window.addEventListener监听hash值然后去匹配对应的路由、从而渲染页面的组件

 location.hash = '/path'  // 无刷新改变地址栏url

<template><div class="about">这里是about组件</div>
</template><script>
export default {}
</script><style>
.about{width: 300px;line-height: 100px;text-align: center;background: green;
}
</style>

<template><div class="home">这里是home组件</div>
</template><script>
export default {}
</script><style>
.home{width: 300px;line-height: 100px;text-align: center;background: blue;
}
</style>

<template><div class="mine">这里是mine组件</div>
</template><script>
export default {}
</script><style>
.mine{width: 300px;line-height: 100px;text-align: center;background: pink;
}
</style>

<template><div id="app"><h3>这里是App组件</h3><hr><h4>router-link组件，控制地址栏的改变</h4><router-link to="/">首页</router-link> |<router-link to="/about">关于</router-link> |<router-link to="/mine">我的</router-link><hr><h4>router-view组件，根据地址栏的改变渲染不同组件</h4><router-view></router-view></div>
</template><script>
import RouterLink from './router/router-link'
import RouterView from './router/router-view'
export default {name: 'App',components: {RouterLink, RouterView}
}
</script><style>

以上是三个组件及其路由切换结构、以下组件是添加事件并改变其哈希值的路由地址

<template><!-- 绑定一个组件的点击事件 --><span class="router-link" @click="linkTo"><slot></slot></span>
</template><script>
export default {props: ['to'],methods: {linkTo () {// console.log('要切换的path：'+this.to)// 改变地址栏的hash值location.hash = this.to}}
}
</script>

<template><div class="router-view"><!-- 根据其条件渲染不同的组件 --><component :is="componentName"></component></div>
</template><script>
import Home from '../components/Home'
import About from '../components/About'
import Mine from '../components/Mine'export default {data () {return {componentName: ''}},components: {Home, About, Mine},created () {// 监听地址栏的改变window.addEventListener('hashchange',()=>{// let hash = location.hash // '#/about' -> '/about'// let hash = location.hash.substr(1) // '#/about' -> '/about'// let hash = location.hash.split('#')[1] // '#/about' -> '/about'let hash = location.hash.replace('#','') // '#/about' -> '/about'// console.log('hash改变了。。。',hash)// 创建路由表let routes = [{path: '/',component: 'Home'},{path: '/about',component: 'About'},{path: '/mine',component: 'Mine'}]// 匹配路由routes.forEach((item)=>{if (item.path === hash) {this.componentName = item.component}})})}
}
</script><style></style>

因为Vue数据是响应式的，数据变则视图变，从而渲染不同的组件。

以上是本人的对Vue哈希路由的原理的理解，如有不足之处还请大神指点。下次再对history路由的原理的介绍。

vue中路由的实现原理？相关推荐

vue中路由实现的原理？
一.概念通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式定义动态参数 {path:'/user/:id/:name', ...
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
vue中路由跳转怎样刷新页面保证页面更新
vue中我们实现从一个页面点击某一项跳转到另外一个页面事使用在点击事件中定义 <card @click.native="viewMoreRelation(item)" :ar ...
vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
解决 Vue 中路由跳转相同路径页面不刷新的问题
vue 中同一路由跳转由于不会重新执行生命周期,所以数据不更新.不管是动态路由,还是传参都不会刷新页面最简单最常用的方式是监听路由变化,在路由发生变化后执行一系列操作 watch: {$route( ...
关于Vue中路由配置和router-link的一点补充
前置知识: 1.Vue组件.单页面组件 2.目录结构关联性知识简介: 将组件和路径映射起来.主要用于单页面组件应用,即:创建了多个单页面组件,可通过vue router来进行类似页面的跳转.因为单页 ...
解决vue中路由跳转同一个路径报错
在vue项目中,如果使用$router.push跳转到一个相同的路由会报错如何解决 vue-router在3.1.0版本之后,push和replace方法会返回一个promise对象,如果跳转到相同的 ...

vue中路由的实现原理？

vue中路由的实现原理？

vue中路由的实现原理？相关推荐

最新文章

热门文章