Vue中vue-router路由使用分析
题记
—— 严于律己,精于行动,点滴积累,着眼未来,你也许不负青春
本小节描述
1、前端路由的两种主流实现方式 hash 与 history对象 简述
2、分析使用在 vue 中通过 vue-router 实现路由功能
《Vue项目开发中的点滴积累 系列文章》点击查看这里
1 引言
vue-router 路由,在 vue 项目开发中实现页面的跳转控制 ,路由中 的 route, routes, router 我们这里来分析一下
1.1 route 分析
route ,在英文中解析为 路线,在应用程序中,从一个页面跳转到另一个页面,行成一条路线,可以称做一条路由,如下图所示中
1.2 routes 分析
routes 是 route的复数,s 后缀在英文中可表示多个,那么在这里,routes 就表示多个路由,一组路由,把上面图中的两条路由组合起来,形成一个数组。
1.3 router 分析
router 在英文的解析中是 路由器,那么在这里,我们可以理解成 router 相当于一个管理者,它用来管理路由。
因为routes 只是定义了一组路由,它放在哪里是静止的,当用户点击 页面一中的 按钮的时候,这时router 就起作用了,它到routes 中去查找,去找到对应的 按钮事件 内容
1.4 前端路由的实现原理
早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 reload 就能刷新数据,也给前端路由的出现奠定了基础.
对于现阶段前端路由的两种主流实现方式 【hash值 + onhashchange事件】和【history对象 + pushState()方法 + onpopstate事件】
1.4.1 前端路由 hash 简述
早期的前端路由的实现就是基于location.hash来实现的,如下面代码所示
window.location.hash = '/'; //初始化路由$("#btn").onclick = function(){//点击设置路由跳转indexURL window.location.hash = '/index';
}
这种方式是 主要是利用onhashchange事件监听hash值的改变通过与我们设置的路由对比而响应对应的页面。
出发hsah变化的方式除了上述我们写到的 window.location.hash 直接赋值外,还有一种方式就是通过a标签,并设置href属性,当用户点击这个标签后,URL就会发生改变,也就会触发hashchange事件了
<a href="#index">index页面</a>
1.4.2 History API
在 HTML5 又提供了History API来实现URL的变化。其中做最主要的API有以下两个:history.pushState()和history.repalceState()
我们可以理解为这两个API可以在不进行刷新的情况下,操作浏览器的历史纪录。唯一不同的是,前者是新增一个历史记录,后者是直接替换当前的历史记录
<p id="test"><a href="/home" title="home页面">home页面</a><a href="/login" title="login页面">login页面</a>
</p>
<div class="main" id="main"></div>
<script>
;(function(){var examplebox = document.getElementById('test')var mainbox = document.getElementById('main')examplebox.addEventListener('click', function(e){e.preventDefault()var elm = e.targetvar uri = elm.hrefvar tlt = elm.titlehistory.pushState({path:uri,title:tlt}, null, uri)mainbox.innerHTML = '当前页面是 '+tlt})window.addEventListener('popstate',function(e){var state = e.statemainbox.innerHTML = '当前页面是 ' + state.title})
})()
</script>
2 vue-router 中页面路由实现分析
在vue-router中, 有两个标签
<router-link> 和<router-view>
router-link对应点,router-view对应显示部分。router-link 就是定义页面中点击的部分,如我们的按钮点击,按钮就需要定义在 router-link中, route-link 属性 to 定义点击之后要去哪里
router-view 定义显示部分,就是点击后,要显示的内容硕 ,定义点击之后,要到哪里去
<router-link to="/home">Home</router-link>
3 在vue 项目中使用 vue-router 路由
import App from '@/App'
// 引入路由
// 这里的 import router 的router 一定要小写,还不能写成期货的值,否则报 can't match的报错
///Error in render: "TypeError: Cannot read property 'matched' of undefined"
import router from "./test_router.js"
//在 Vue 组件中使用
new Vue({el: '#app',// 注入到根实例中router,render: h => h(App)
})
需要注意的是 这里的 import router 的router 一定要写成 router,如果写成其他的,比如下面这样写
import test_router from "./test_router.js"
//在 Vue 组件中使用
new Vue({el: '#app',// 注入到根实例中test_router,render: h => h(App)
})
那么在加载运行时会报错
webpack-internal:///./node_modules/vue/dist/vue.esm.js:572 [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
如下图所示
上述代码中,我们引入了App.vue文件,那么在src目录下的App.vue文件中
<template><div id="app"><header><!-- router-link 定义点击后导航到哪个路径下 --><router-link to="/home"><br/><button>点击跳转home页面</button></router-link><router-link to="/login"><br/><button>点击跳转login页面</button></router-link></header><!-- 对应的组件内容渲染到router-view中 --><router-view></router-view></div>
</template><script>export default {}
</script>
在上述代码中,我们通过 router-link 配制路由,触发路由后,将对应的内容页面加载显示在 router-view 中。
对于我们引入的test_router.js文件,在src目录下的test_router.js文件中
///引入 VueRouter
import VueRouter from "vue-router";// 引入组件
import home from "./test_home.vue";
import login from "./test_login.vue";// 挂载Vue.Router
Vue.use(VueRouter);
///配置路由规则
const routes = [//首次进入页面时,它的路径是 '/'//所以在这里重定向到 Home 页面{path: '/',redirect: '/home'},//home页面的路由规则{path:"/home",component: home},{path: "/login",component: login}]///创建VueRouter 实例
var router = new VueRouter({routes
})
export default router;
那么在这里我们引入的 test_home.vue 与 text_login.vue 只是普通的页面组件
然后打开浏览器控制台,如下图所示
可以看到 router-link 标签渲染成了 a 标签,to 属性变成了a 标签的 href 属性。
编译成的 a 标签有一个样式类 .router-link-active ,当router-link 处于选中状态时,vueRouter 会自动添加这个类,当不被选中时,vueRouter 会自动去除它。
完毕,有疑问可留言沟通
Vue中vue-router路由使用分析相关推荐
- Vue中的router路由
目录 一,vue-router路由 二,vue-router路由常用配置 三,vue-router路由嵌套 四,vue-router路由参数传递与获取 五,使用props替代路由对象获取参数 六,路由 ...
- Vue中this.$router.push路由跳转,刷新参数消失
Vue中this.$router.push路由跳转,刷新参数消失 this.$router.push({name:"",params:{id:""}}) nam ...
- Vue中 Vue.prototype 详解及使用——作用:避免和已被定义的数据、方法、计算属性产生冲突
Vue中 Vue.prototype 详解及使用--作用:避免和已被定义的数据.方法.计算属性产生冲突 **应用场景:**在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在 ...
- Vue Router:vue中实现前端路由
Vue Router 官方文档 文章目录 一.路由简介 路由分类 路由安装 二.路由基本使用 安装路由器并设置路由规则 实现路由切换 指定组件的呈现位置 this中的 $router 和 $route ...
- 059——VUE中vue-router之路由嵌套在文章系统中的使用方法:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 055——VUE中vue-router之路由参数的随意设置与伪静态链接地址处理:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 前端笔记-vue中使用router进行页面跳转及除掉url中的#
目录 演示 代码 演示 运行截图如下: 点击后,url跳转如下: 代码 页面跳转的关键 程序结构如下: aaa.vue <template><div>我是aaa<butt ...
- Vue中 Vue.component() 的使用
使用 Vue.component()全局注册组件 新建两个文件:test.vue .index.js // test.vue 这里定义我们准备多次复用的组件 <template><d ...
- vue中this.$router.push()路由传值和获取的两种常见方法
我们在做项目时 ,经常会遇到路由跳转页面传值的问题,有的路由跳转到导航页面时 导航的样式也就改变了. 命名的路由(通过params) this.$router.push({name: "路径 ...
- 在vue中,用路由router跳转打开一个新标签页
需求:点击退租单,生成一个退款表格(打印PDF).需要跳转到一个新标签页. 一.用JS实现 let routeUrl = this.$router.resolve({path: "/surr ...
最新文章
- sqlite insert or replace 和 insert or ignore 用法
- 一道有意思的数据库题
- boost::fusion::filter_view用法的测试程序
- 乐山电子计算机职业学院,学校介绍
- P7516-[省选联考2021A/B卷]图函数【bfs】
- idea中每次push/pull都需要输入账号密码
- android shareUID
- 各种排序算法总结及C#代码实现
- 弹出窗口刷新它的父页面后。出现不重新发送信息,则无法刷新网页
- (1)Java 教程
- Linux下不借助工具实现远程linux服务器上传下载文件
- 乐华网上阅卷系统服务器地址,乐华网上阅卷系统
- 中国全部城市的中心点坐标 json格式
- 部分贴片电阻标准阻值表(印字阻值对照)
- 第五次网页前端培训笔记(javascript基础内容)
- 国内部分视频剪辑软件使用总结
- “跑分”手机已过时,“双高”手机成新方向
- Mac电脑查看本机的mac地址和ip地址
- 彻底删除EFI启动项
- 哈佛职场情商课读书笔记
热门文章
- 改变多目标跟踪领域!CMU等推出大规模多类别MOT数据集TAO
- YOLACT++:目前最热门的实时实例分割开源库
- 盘点旷视14篇CVPR 2019论文,都有哪些亮点?
- 互联网java面试_互联网java面试宝典
- CVPR2019| 最新CVPR2019论文:含目标检测、分割、深度学习、GAN等领域
- C 语言取整的几种方法6,C语言有以下几种取整方法:
- 深度学习(六十一)NNPACK 移植与实验
- php中的oop,在现有PHP中加入OOP
- 淘宝网手机客户端开发(一)目录篇
- 用计算机绘画教学反思,《电脑绘画》教学反思2篇