位置: IT常识 - 正文

Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)(vue路由怎么实现)

编辑:rootadmin
Vue框架中路由的基本概念、路由对象属性、vue-router插件的基本使用效果展示。案例分析、图表展示、附源码地址获取。 ... 前言

推荐整理分享Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)(vue路由怎么实现),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue路由实例,vue 路由两种方式,vue 路由实现,vue 路由两种方式,vue路由用法,vue 路由实现,vue路由用法,vue 路由两种方式,内容如对您有帮助,希望把文章链接给更多的朋友!

本篇随笔主要写了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值而已,没有和服务端交互,所以不存在网络延迟,提升了用户体验。

二、vue-router1。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 <script src="vue.js"></script>2 <script src="vue-router.js"></script>

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

1.2编写HTML结构代码1 <div id="app">2 <router-link to="/login" tag="span">前往登录</router-link>3 <router-view></router-view>4 </div>1.3编写JavaScript逻辑代码 1 var login = { // 创建组件 2 template: '<h1>登录组件</h1>' 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的常用属性信息如下表。Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)(vue路由怎么实现)

三、动态路由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 <div id="app">2 <router-link to="/user?id=10&name=admin">登录</router-link>3 <router-view></router-view>4 </div>1.2编写JavaScript逻辑代码 1 var user = { // 定义user组件 2 template: '<h3>id: {{this.$route.query.id}} ' + 3 'name: {{$route.query.name}}</h3>', 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 <div id="app">2 <router-link to="/user/10/admin">登录</router-link>3 <router-view></router-view>4 </div>1.2编写JavaScript逻辑代码 1 var user = { // 定义user组件 2 template: '<h3>id: {{$route.params.id}} ' + 3 'name: {{$route.params.name}}</h3>', 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 <router-link to="/父路由的地址/要去的子路由"></router-link>

当使用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代码,使用<router-link>标签增加两个导航链接。

1 <div id="app">2 <ul>3 <router-link to="/about" tag="li">关于公司</router-link>4 <router-link to="/contact" tag="li">联系我们</router-link>5 </ul>6 <router-view></router-view> // 给子模板提供插入位置7 </div>1.3在app根容器外定义子组件模板,具体代码如下。 1 <template id="about-tmp"> 2 <div class="about-detail"> 3 … // 省略代码 4 </div> 5 </template> 6 <template id="contact-tmp"> 7 <div class="about-detail"> 8 … // 省略代码 9 </div>10 </template>1.4创建组件模板对象,具体代码如下。 1 <script> 2 // 组件的模板对象 3 var about = { template: '#about-tmp' } 4 var contact = { template: '#contact-tmp' } 5 // 子路由的组件模板对象 6 var detail = { template: '<p>xx是全球领先... ...</p>'} 7 var governance = { 8 template: '<p>公司坚持以客户为中心、以奋斗者为本... ...</p>' 9 }10 </script>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在<style>标签内编写样式代码,具体代码如下。1 ul, li, h1 { padding: 0; margin: 0; list-style: none }2 #app { width: 100%; display: flex; flex-direction: row; }3 ul { width: 200px; flex-direction:column; color:#fff; }4 li { flex: 1; background: #000; margin:5px auto; 5 text-align: center; line-height: 30px; }6 .about-detail { flex:1; margin-left: 30px; }7 .about-detail h1{ font-size: 24px; color: blue; }1.8案例完成后的最终效果图如下。

五、命名路由1。什么是命名路由

vue-router提供了一种隐式的引用路径,即命名路由,可以在创建Router实例的时候,在routes中给某个路由设置名称name值。通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候,通过路由的名称取代路径地址直接使用。像这种命名路由的方式,无论path多长、多烦琐,都能直接通过name来引用,十分方便。

2。命名路由案例1.1编写HTML结构代码1 <div id="app">2 // 当使用对象作为路由的时候,to前面要加一个冒号,表示绑定3 <router-link :to="{name:'user',params:{id:123}}">登录</router-link>4 <router-view></router-view>5 </div>1.2编写JavaScript逻辑代码1 var user = { // 创建user组件2 template: '<h3>我是user组件</h3>',3 created () { console.log(this.$route) }4 }5 var router = new VueRouter({ // 创建路由对象6 routes: [{ path: '/user/:id', name: 'user',component: user }]7 })8 var vm = new Vue({ el: '#app', router })1.3单击“登录”时,会跳转到指定的路由地址,效果图如下六、命名视图1。什么是命名视图

在开发中,有时候想同时或同级展示多个视图,而不是嵌套展示,则可以在页面中定义多个单独命名的视图。使用<router-view>可以为视图进行命名,它主要用来负责路由跳转后组件的展示。在<router-view>上定义name属性表示视图的名字,然后就可以根据不同的name值展示不同的页面,如left、main等。如果<router-view>没有设置名字,那么默认为default。

2。命名视图案例1.1编写HTML结构代码1 <div id="app">2 <router-view></router-view>3 <div class="container">4 <router-view name="left"></router-view>5 <router-view name="main"></router-view>6 </div>7 </div>8 //name值为left和main,表示渲染其对应的组件1.2编写JavaScript逻辑代码 1 var header = { template: '<h1 class="header">header头部区域</h1>' } 2 var sidebar = { template: '<h1 class="sidebar">sidebar侧导航区域</h1>' } 3 var mainBox = { template: '<h1 class="main">mainBox主体区域</h1>' } 4 var router = new VueRouter({ 5 routes: [{ 6 path: '/', 7 components: {'default': header,'left': sidebar,'main': mainBox} 8 }] 9 })10 var vm = new Vue({ el: '#app', router })1.3编写CSS样式代码1 html, body { margin: 0; padding: 0; }2 h1 { margin: 0; padding: 0; font-size: 16px; }3 .header { background-color: lightblue; height: 80px; }4 .container { display: flex; height: 600px; }5 .sidebar { background-color: lightgreen; flex: 2; }6 .main { background-color: lightpink; flex: 8;1.4浏览器预览效果如下图

七、编程式导航1。router.push()

在前面的开发中,当进行页面切换时,都是通过<router-link>来实现的,这种方式属于

本文链接地址:https://www.jiuchutong.com/zhishi/302795.html 转载请保留说明!

上一篇:phpcms系统连接mysql失败(php连接mysql8.0)

下一篇:帝国cms如何安装(帝国cms移动端)

  • 微信怎么取消拉黑(微信怎么取消拉黑名单)

    微信怎么取消拉黑(微信怎么取消拉黑名单)

  • u盾是干嘛用的(u盾怎么用)

    u盾是干嘛用的(u盾怎么用)

  • 钉钉老师可以看到学生分屏吗(钉钉老师可以看到学生分屏的内容吗)

    钉钉老师可以看到学生分屏吗(钉钉老师可以看到学生分屏的内容吗)

  • 华为nova5的文字扫描功能在哪(华为nova5文字识别怎么使用)

    华为nova5的文字扫描功能在哪(华为nova5文字识别怎么使用)

  • 手机需要关机休息吗(手机适当关机休息几天好吗)

    手机需要关机休息吗(手机适当关机休息几天好吗)

  • 换了屏幕后老是点不动(换了屏幕后老是点不动还会自己跳怎么办)

    换了屏幕后老是点不动(换了屏幕后老是点不动还会自己跳怎么办)

  • 抖音极速版签到在哪里(抖音极速版签到怎么不见了)

    抖音极速版签到在哪里(抖音极速版签到怎么不见了)

  • u盘乱码恢复后文件没了(u盘乱码恢复正常文件不见了)

    u盘乱码恢复后文件没了(u盘乱码恢复正常文件不见了)

  • 被好友删除还能看到朋友圈吗(被好友删除还能发消息)

    被好友删除还能看到朋友圈吗(被好友删除还能发消息)

  • 美团自取怎么没有了(美团自取怎么没取件码)

    美团自取怎么没有了(美团自取怎么没取件码)

  • 苹果手机刷地铁没反应(苹果手机刷地铁卡需要按两下)

    苹果手机刷地铁没反应(苹果手机刷地铁卡需要按两下)

  • word文档怎么变大页面(word文档怎么变成一页排版)

    word文档怎么变大页面(word文档怎么变成一页排版)

  • 苹果无法处理购买怎么办(苹果无法处理购买的软件)

    苹果无法处理购买怎么办(苹果无法处理购买的软件)

  • 一加七手机是哪家公司的(一加七手机是国产吗)

    一加七手机是哪家公司的(一加七手机是国产吗)

  • oppo怎么关闭按键灯(Oppo怎么关闭按键声音)

    oppo怎么关闭按键灯(Oppo怎么关闭按键声音)

  • 抖音私信功能禁封多久(抖音私信功能禁用怎么解除掉)

    抖音私信功能禁封多久(抖音私信功能禁用怎么解除掉)

  • 手机搜索候选是干啥呢(搜索后选功能)

    手机搜索候选是干啥呢(搜索后选功能)

  • oppok5是屏幕指纹吗(oppok5屏幕指纹不灵敏)

    oppok5是屏幕指纹吗(oppok5屏幕指纹不灵敏)

  • 苹果储存其他怎么删除(苹果储存中其他怎么删除)

    苹果储存其他怎么删除(苹果储存中其他怎么删除)

  • 苹果怎么看最近删除短信(苹果怎么看最近打开的应用)

    苹果怎么看最近删除短信(苹果怎么看最近打开的应用)

  • 华为watchgt2上市时间(华为watch gt2发布价格)

    华为watchgt2上市时间(华为watch gt2发布价格)

  • 照相怎么显示时间(照相时如何显示时间)

    照相怎么显示时间(照相时如何显示时间)

  • 移动花卡办理怎么解除(移动花卡办理怎么还要拍视频)

    移动花卡办理怎么解除(移动花卡办理怎么还要拍视频)

  • 苹果双卡发短信方法(苹果双卡发短信怎么选择)

    苹果双卡发短信方法(苹果双卡发短信怎么选择)

  • 大溪地海岸附近的乌翅真鲨,法属波利尼西亚 (© Paul Mckenzie/Minden Pictures)(大溪地海岛在什么地方)

    大溪地海岸附近的乌翅真鲨,法属波利尼西亚 (© Paul Mckenzie/Minden Pictures)(大溪地海岛在什么地方)

  • 缴纳当月的增值税
  • 应收往来会计是做什么工作的
  • 增值税进项发票认证流程
  • 应付账款坏账了怎么处理
  • 总分机构企业所得税汇算清缴
  • 交易性金融资产的账务处理
  • 财产性收入是非劳动性收入吗
  • 政府补贴项目账务怎么做
  • 收到股本的现金怎么做账
  • 税控盘服务费减免政策文件
  • 土地资产类型
  • 取得增值税专用发票
  • 房产证没有可以补办吗
  • 金税盘要钱不
  • 存根联和记账联丢失有影响吗
  • 应税行为扣除额期初余额
  • 公司做账挂名字
  • 合伙企业收到的合伙金计入什么科目
  • 免税销售额需要价税分离吗
  • 取得高新技术企业
  • 存在弃置费用的固定资产,如果履行弃置义务
  • 联想y400怎么装win10
  • 好听的开机音效
  • ubuntu 安装vs code
  • 提前退休的一次性补贴收入
  • macOS Big Sur 11.3 开发者预览版/公测版 Beta 6正式发布
  • php 模拟post
  • 存货报废的税务处理及会计处理
  • oppor11s输入法怎么清除记忆
  • 影响当期损益的税费
  • 结算借款的账务处理办法
  • 爱德华多·阿涅利
  • 合同中违约金
  • 向银行借入的资金属于什么
  • [Vue warn]: Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘$on‘)“
  • 差旅费住宿费专票抵扣联贴在哪里
  • 企业自建房出售给员工个人后还需要缴纳土地使用税么
  • 本期进项税额明细表为什么数据一直出不来
  • phpcms程序
  • 深入理解jvm第三版pdf百度云
  • 小企业如何计提折旧
  • 分成收入计入什么科目
  • 销售成本是付现成本吗
  • sql动态执行
  • sql服务器无法启动的解决
  • 不动产租赁服务包括哪些
  • 小规模增值税免税政策变化历程
  • 哪些增值税可以免税
  • 实收资本减少的要交什么税
  • 支付水电费的会计
  • 设备折旧怎么记账
  • 老板请员工吃饭的文案
  • 企业职工薪酬如何确定
  • 航天税盘服务费分录
  • 自建厂房的进项税额抵扣
  • 私营公司固定资产怎么查
  • mysql 远程连接不上
  • win7提示盗版怎样激活
  • 行为异常不能使用优惠
  • Linux系统中管理员如何获得root权限
  • centos7.4修改主机名
  • win7虚拟xp系统怎么安装
  • 为什么要淘汰相关性高的指标
  • 默认终端地址
  • 安装fedora33
  • services.exe是什么文件
  • linux怎么切到桌面
  • win8 侧边栏
  • 怎么查看自己mac电脑有没有被人使用过
  • 毕竟近义词语
  • Nymse.exe - Nymse是什么进程 有何作用
  • 什么是从零开始
  • opengl实现光线追踪
  • Nodejs+Socket.io实现通讯实例代码
  • javascript包含哪三大部分
  • jquery如何实现轮播图
  • javascript巧用eval函数组装表单输入项为json对象的方法
  • 税务责令改正通知书
  • 云旅游存在的问题及解决措施
  • 对外销售产品
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设