vue中路由的实现原理?
vue中路由的实现原理?1、首先需要了解一下Vue路由分为两种,一种是哈希路由,其最明显的特征是URL地址带‘#’号的,其实对地址栏也就不怎么美观一点。其次是history路由也就是URL不带‘#’号的地址,也就是我们比较常见的地址。2、为什么要了解Vue路由的实现原理呢?其实我们都知道Vue 构建的单页面应用,其实根据路由地址的不同渲染不同的组件,在无刷新的前提下进行组件切换,根据路由地址切换不
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
路由的原理的介绍。
更多推荐
所有评论(0)