Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)
阅读原文时间:2022年05月23日阅读:1

前言

本篇随笔主要写了Vue框架中路由的基本概念、路由对象属性、vue-router插件的基本使用效果展示。案例分析、原理图解、附源码地址获取。

作为自己对Vue路由进行页面跳转效果知识的总结与笔记。

因内容有案例解读,代码实现,导致篇幅稍长,大约3分钟可以浏览完,如有需要的话(请笔友耐心看完,也可按目录查找所需内容)

如需要全部案例代码-自取:(百度网盘链接,全套案例源码

链接:https://pan.baidu.com/s/1EHOCU2qfDSx1BgI-SueFEg?pwd=1234 
提取码:1234

PS: 点击模版后的 -->  这个标志可以浏览目录结构,以便快速定位需要的内容

1。什么是后端路由

提到路由,一般会想到生活中常见的路由器,路由器主要用于连接多个逻辑上分开的网络,逻辑网络代表一个单独的网络或者一个子网,可以通过路由器功能来完成不同网络之间数据的传递。在Vue中也引入了路由的概念,因此,我们先来对程序开发中的路由进行简单地了解。

程序开发中的路由分为后端路由和前端路由。后端路由通过用户请求的URL分发到具体的处理程序,浏览器每次跳转到不同的URL,都会重新访问服务器。服务器收到请求后,将数据和模板组合,返回HTML页面,或者直接返回HTML模板,由前端JavaScript程序再去请求数据,使用前端模板和数据进行组合,生成最终的HTML页面。
后端路由的工作原理如下图所示。

上图中,网站的服务器地址是http://localhost,在这个网站中提供了3个页面,分别为“首页”“关于”和“我的资料”。当用户在浏览器中输入URL地址http://localhost/person来访问“我的资料”页面时,服务器就会收到这个请求,找到相对应的处理程序,这就是路由的分发,这一功能是通过路由来实现的。

注意:浏览器每访问一次新页面的时候,都要向服务器发送请求,然后服务器会响应请求,返回新页面给浏览器,在这个过程中会有一定的网络延迟。

2。什么是前端路由

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。对于单页面应用(SPA)来说,主要通过URL中的hash(#号)来实现不同页面之间的切换。hash有一个特点,就是HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash来实现。
前端路由的工作原理如下图所示。

上图中,index.html后面的“#/home”是hash方式的路由,由前端路由来处理,将hash值与页面中的组件对应,当hash值为“#/home”时,就显示“首页”组件。
前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已,没有和服务端交互,所以不存在网络延迟,提升了用户体验。

1。vue-router工作原理

单页面应用(SPA)的核心思想之一,就是更新视图而不重新请求页面,简单来说,它在加载页面时,不会加载整个页面,只会更新某个指定的容器中的内容。对于大多数单页面应用,都推荐使用官方支持的vue-router。
在实现单页面前端路由时,提供了两种方式,分别是hash模式和history模式,根据mode参数来决定采用哪一种方式。

1.1 hash模式

vue-router默认为hash模式,使用URL的hash来模拟一个完整的URL,当URL改变时,页面不会重新加载。#就是hash符号,中文名为哈希符或者锚点,在hash符号后的值,称为hash值。
路由的hash模式是利用了window可以监听onhashchange事件来实现的,也就是说hash值是用来指导浏览器动作的,对服务器没有影响,HTTP请求中也不会包括hash值,同时每一次改变hash值,都会在浏览器的访问历史中增加一个记录,使用“后退”按钮,就可以回到上一个位置。所以,hash模式是根据hash值来发生改变,根据不同的值,渲染指定DOM位置的不同数据。

1.2 history模式

history模式不会出现#号比较美观,这种模式充分利用history.pushState()来完成URL的跳转而且无须重新加载页面。使用history模式时,需要在路由规则配置中增加mode:'history',示例代码如下。

1 1 // main.js文件
2 2 const router = new VueRouter({
3 3 mode: 'history',
4 4 routes: […]
5 5 })

注意:HTML5中history有两个新增的API,分别是history.pushState() 和 history.replaceState(),它们都接收3个参数,即状态对象(state object)、标题(title)和地址(URL)。

2。vue-router基本使用

vue-router可以实现当用户单击页面中的A按钮时,页面显示内容A;单击B按钮时,页面显示内容B。换言之,用户单击的按钮和页面显示的内容,两者是映射的关系。
学习vue-router的基本使用前,首先了解路由中3个基本的概念:route、routes、router。

  • route :表示它是一条路由,单数形式
  • routes:表示它是一组路由,把route的每一条路由组合起来,形成一个数组
  • router:表示它是一个机制,充当管理路由的管理者角色

案例展示

1.1下载并引入vue.js和vue-router.js文件

首先从官方网站获取vue.js和vue-router.js文件,保存到文件目录中。其次创建html文件,并在文件中引入这两个文件,示例代码如下。

1
2

注意:在引入vue-router.js之前,必须先引入vue.js,因为vue-router需要在全局Vue的实例上挂载vue-router相关的属性。

1.2编写HTML结构代码

1


2 前往登录

3
4

1.3编写JavaScript逻辑代码

1 var login = { // 创建组件
2   template: '

登录组件

'
3 }
4 var routerObj = new VueRouter({[ // 配置路由匹配规则
5 routes: {path: '/login', component: login} ]
6 })
7 var vm = new Vue({
8 el: '#app',
9 router: routerObj // 将路由规则对象注册到vm实例上
10 })

1.4浏览器运行查看

在浏览器中打开文件,会看到页面中只有“前往登录”这4个字,单击“前往登录”,就会在下方出现“登录组件”,效果如下图所示。

注意:在创建的routerObj对象中,如果不配置mode,就会使用默认的hash模式,该模式下会将路径格式化为#开头。添加mode:'history'之后,将使用HTML5 history模式,该模式下没有#前缀。component的属性值,必须是一个组件的模板对象,不能是组件的引用名称。

3。路由对象属性

路由对象(route object)表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录。路由对象是不可变的,每次成功地导航后都会产生一个新的对象。
this.$router表示全局路由器对象,项目中通过router路由参数注入路由之后,在任何一个页面都可以通过此属性获取到路由器对象,并调用其push()、go()等方法。this.$route表示当前正在用于跳转的路由对象,可以访问其name、path、query、params等属性。

1.1 路由对象$route的常用属性信息如下表。

1。什么是动态路由

上面讲到的路由,都是严格匹配的,只有router-link中的to属性和JavaScript中定义的路由中的path一样时,才会显示对应的component。但在实际开发时,这种方式是明显不足的,例如,在不同角色登录网站时,在去配置路由的时候,需要把用户id作为参数传入,这就需要利用动态路由来实现。在vue-router的路由路径中,可以使用动态路径参数给路径的动态部分匹配不同的id。
在vue-router的路由路径中,可以使用动态路径参数给路径的动态部分匹配不同的id,示例代码如下。

1 { path: "/user/:id", component: user }
2 :id表示用户id,动态值

注意:动态路由在来回切换时,由于它们都是指向同一组件,Vue不会销毁再重新创建这个组件,而是复用这个组件。

如果想要在组件来回切换时进行一些操作,那就需要在组件内部利用watch来监听$route的变化,示例代码如下。

1 watch: {
2 $route (to, from) {
3 console.log(to) // to表示要去的那个组件
4 console.log(from) // from表示从哪个组件过来的
5 }
6 }

2。query方式传参

在理解了动态路由的概念后,接下来我们结合案例学习如何使用query方式传递参数。通过query方式传递参数,使用path属性给定对应的跳转路径(类似于GET请求),在页面跳转的时候,可以在地址栏看到请求参数。

1.1编写HTML结构代码

1

2 登录 3 4

1.2编写JavaScript逻辑代码

1 var user = { // 定义user组件
2 template: '

id: {{this.$route.query.id}} ' + 3 'name: {{$route.query.name}}

',
4 created () { // 组件的生命周期钩子函数
5 console.log(this.$route) // 用this.$route来接收参数
6 }
7 }
8 var router = new VueRouter({
9 routes: [ { path: '/user', component: user }]
10 })
11 var vm = new Vue({ el: '#app', router })

1.3单击“登录”链接,效果图如下

3。params方式传参

结合案例讲解如何使用params方式传递参数。使用params方式则不需要通过查询字符串传参,通常会搭配路由的history模式,将参数放在路径中或隐藏。
在路由中开启history模式后,params方式的URL地址会更加简洁,但此功能必须搭配服务器使用,并且要在服务器中添加history模式的支持(在5.3节中已经讲过),否则会出现找不到文件的错误。

1.1编写HTML结构代码

1

2 登录 3 4

1.2编写JavaScript逻辑代码

1 var user = { // 定义user组件
2 template: '

id: {{$route.params.id}} ' + 3 'name: {{$route.params.name}}

',
4 created () { // 组件的生命周期钩子函数
5 console.log(this.$route) // 用this.$route来接收参数
6 }
7 }
8 var router = new VueRouter({
9 routes: [{ path: '/user/:id/:name', component: user } ]
10 })
11 var vm = new Vue({ el: '#app', router })

1.3单击“登录”链接,效果图如下

1。什么是嵌套路由

是否是嵌套路由主要是由页面结构来决定的,实际项目中的应用界面,通常由多层嵌套的组件组合而成。简而言之,嵌套路由就是在路由里面嵌套它的子路由。
嵌套子路由的关键属性是children,children也是一组路由,相当于前面讲到的routes,children可以像routes一样的去配置路由数组。每一个子路由里面可以嵌套多个组件,子组件又有路由导航和路由容器。

1

当使用children属性实现子路由时,子路由的path属性前不要带“/”,否则会永远以根路径开始请求,这样不方便用户去理解URL地址,示例代码如下。

1 var router = new VueRouter({
2 routes: [{
3 path: '/home',
4 component: home,
5 children: [ // 子路由
6 { path: 'login', component: login },
7 { path: 'register', component: register }]
8 }]
9 })

2。嵌套路由案例

通过一个案例来理解路由嵌套的应用。案例完成后的效果图如下。

1.1案列分析

在上图中,页面打开后会自动重定向到about组件,即“关于公司”页面,在该页面下有两个子页面,分别是“公司简介”和“公司治理”。单击“公司简介”链接,URL跳转到about/detail组件,效果如图(1)所示。单击“公司治理”链接,URL跳转到about/governance组件,效果如图(2)所示。

1.2代码实现

创建html文件,编写HTML代码,使用标签增加两个导航链接。

1

2
    3 关于公司 4 联系我们 5
6 // 给子模板提供插入位置 7

1.3在app根容器外定义子组件模板,具体代码如下。

1
6

1.4创建组件模板对象,具体代码如下。

1

1.5 创建路由对象router,配置路由匹配规则,具体代码如下。

1 var router = new VueRouter({
2 routes: [
3 { path: '/', redirect: '/about' }, // 路由重定向
4 { path: '/about',component: about,
5 children: [
6 { path: 'detail', component: detail },
7 { path: 'governance', component: governance}
8 ] },
9 { path: '/contact', component: contact }
10 ] })

1.6 挂载路由实例,具体代码如下。

1 var vm = new Vue({
2 el: '#app',
3 router // 挂载路由
4 })

1.7在