雨夜 小知识百科站
您的位置:小知识百科站 » 投稿 » 前端动态路由配置,<路由router-基本使用> » 正文

前端动态路由配置,<路由router-基本使用>

投稿2023-12-06已被浏览0

关于《前端动态路由配置,<路由router-基本使用>》,现在小知识百科站小编给您分享一下,希望您阅读完本篇内容后能有所收获。如果对您有所帮助别忘了关注本站哦。

1、Vue教程(路由router-基本使用)

本文开始我们来给大家介绍在Vue中非常重要的一个内容,就是路由Router

什么是路由

后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;

前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;

在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);

Vue路由基本使用

1. 基本使用

我们先来看看 路由的 基本使用,基础页面如下

前端动态路由配置,<路由router-基本使用>

1.1 引入vue-router

我们需要引入vue-router.js文件,而且必须是在vue.js文件之后引入

前端动态路由配置,<路由router-基本使用>

1.2 创建组件模板

创建两个组件模板对象,如下

前端动态路由配置,<路由router-基本使用>

1.3 VueRouter实例

当 导入 vue-router 包之后,在 window 全局对象中,就有了一个 路由的构造函数叫做 VueRouter,在 new 路由对象的时候,可以为 构造函数,传递一个配置对象。在配置对象中我们可以来创建我们的路由规则

前端动态路由配置,<路由router-基本使用>

1.4 vm实例绑定

创建的VueRouter对象我们还需要绑定到Vue实例中才有效果

前端动态路由配置,<路由router-基本使用>

1.5 router-view

我们想要使用router路由,那么我们通过router-view标签来占位 我们要显示的内容的位置

前端动态路由配置,<路由router-基本使用>

router-view标签是 vue-router 提供的元素,专门用来 当作占位符的,将来,路由规则,匹配到的组件,就会展示到这个 router-view 中去。所以: 我们可以把 router-view 认为是一个占位符。

1.6 访问

前端动态路由配置,<路由router-基本使用>

通过上面的演示我们可以通过修改 #/后的内容来 触发路由中的规则,这时我们可以在页面中添加对应的操作按钮来便捷触发。

前端动态路由配置,<路由router-基本使用>

前端动态路由配置,<路由router-基本使用>

2. 重定向

上面的案例我们实现了路由的基本使用,但是页面第一次打开的时候,是没有路由规则的,这时我们可以配置一个,如下

前端动态路由配置,<路由router-基本使用>

效果

前端动态路由配置,<路由router-基本使用>

有实现,但是地址显示的是“/”,我们希望地址和路由的结果是一致的,这时我们可以设置个重定向来处理。

前端动态路由配置,<路由router-基本使用>

3. router-link

我们可以用router-link标签来替换掉 a标签,这样会更灵活些,如下

前端动态路由配置,<路由router-基本使用>

前端动态路由配置,<路由router-基本使用>

我们发现router-link渲染的最终的标签也是 a 标签,我们可以通过 router-link中的 tag属性来修改 渲染的标签类型

前端动态路由配置,<路由router-基本使用>

前端动态路由配置,<路由router-基本使用>

4. 高亮处理

有时候我们需要给被选中的标签设置特殊的样式,这时怎么办呢?看下面的动图。

前端动态路由配置,<路由router-基本使用>

通过演示我们发现,当对应的标签被选中的时候会动态给标签添加 class属性:

router-link-active,那么我们就可以利用这 属性了

前端动态路由配置,<路由router-基本使用>

前端动态路由配置,<路由router-基本使用>

实现了我们需要的效果,注意在VueRouter实例中有个属性叫 linkActiveClass 可以设置我们 特定的 class 值。

前端动态路由配置,<路由router-基本使用>

前端动态路由配置,<路由router-基本使用>

效果

前端动态路由配置,<路由router-基本使用>

5. 动画效果

 最后我们可以将前面讲过的动画运用到组件切换上。如下

前端动态路由配置,<路由router-基本使用>

前端动态路由配置,<路由router-基本使用>

最终效果如下

前端动态路由配置,<路由router-基本使用>

————————————————

2、前端动态路由配置,<路由router-基本使用>

0. 摘要

本文介绍了单页应用和路由的概念,并介绍了如何用两个技术:hash模式和history模式来实现单页应用的效果。

1. 内容
  • 什么是单页应用
  • 单页应用的特点
  • 用路由来实现单页应用
  • hash模式
  • history模式
  • 总结
2. 什么是单页应用

单页应用的英文是single page application,简称SPA。字面含义就是一个应用只有一个页面,这其实是一个很颠覆的概念,有点反常识。按我们一般意义上的理解,一个应用肯定得有多个页面呀。例如:一个新闻网站必须有主页,列表页,详情页等等。我们可能想象不到一个只有一个页面的应用是啥?“就一个主页”,“就一个静态的个人说明页面”。

肯定不是。我们多花点时间看看历史。

早先的网站都是多页的,也就是字面意义上的多页:主页可能就是index.html, 列表页就是list.html,详情页就是detail.html等等,这样的好处就是开发清晰,3P(asp, jsp, php)技术就典型的代表。随着移动设备的兴起,越来越多的页面时候通过移动设备的来访问的,那多页面的应用的天然缺陷就显示出来了:

1. 页面跳转时不可避免地会出现白屏;2. 从a页面跳转到b页面时,难免有会有重复的部分(例如页头和页脚一般都是通用的),而这些重复部分显然也会造成不必要的流量浪费。这些问题在pc端都是不问题,但是在移动设备上就是大问题了,为了提升用户的体验,让用户更快的看到页面,节约流量,程序员们发明了单页应用技术。

单页应用的主要特点就是:用一个页面(页面的名字就是index.html)来实现所有(多个页面的)的功能。

其实,SPA、MPA这些名称都是随着技术发展应用而提出来的,就像智能手机和功能手机的这对概念,在诺基亚风靡世界时(2010年左右),它们并没有被创造出来,我们讨论的话题都是 多少和弦 上,但是当出来一批更强大,更聪明的手机时,我们要做区分呀,就给诺基亚们取了名字叫功能机。类似的概念还有服务器端渲染和客户端渲染。

3. 单页应用的特点

单页应用的特点很明显:地址栏的变化导致内容的变化,但是整个页面并不刷新。下面是一张示意图:

前端动态路由配置,<路由router-基本使用>

它的好处是第一次获取到index.html这个页面之后,再也不需要请求其他的页面了,所有的功能操作都在这一个页面中完成。

4. 单页应用的实现方式-路由

现在我们抛开单页应用这名词放一边,把注意力放在如何实现具体功能上:地址栏中的内容变化了,主体内容有对应的更新,但是整体页面不去刷新。

就是我们说的前端路由技术。

路由是啥?可不是路由器哈。

前端动态路由配置,<路由router-基本使用>

路由就是一套规则:根据地址栏中地址来决定页面主体上的内容显示。例如:当地址是/list时,内容就是列表页的内容。当地址是/detail时,内容就是详情页的内容,依次类推。

实现路由功能有两种方式:

  • Hash模式。它主要是监听浏览器的hashchange事件。
  • history模式。它主要是调用history的pushState,replaceState方法,监听popstate事件。

都是利用浏览器的相关api特性来达成目标,严格来讲,都不属于js的内容。下面我们来分别介绍这两种技术。

5. hash模式

相比较history模式,用hash模式来实现这个功能会比较简单。

5.1 原理

当页面中的地址栏从 index.html/#/detail 变成 index.html/#/list 时:

  • 页面并不会刷新。
  • 会触发hashChange事件。这将是我们代码实现的重点。
  • 会向浏览器中追加一条浏览记录。也就是说通过浏览器的前进和后退按钮可以切换内容。

前端动态路由配置,<路由router-基本使用>

5.2 代码

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { background-color: #eee; } #app { background-color: #fff; margin: 2px auto; padding: 2em; } #content{padding:0.5em}</style></head><body> <div id="app"> <nav> <a href="#/">主页</a> <a href="#/list">列表页</a> <a href="#/detail">详情页</a> </nav> <button id="btn">跳到详情页</button> <div id="content"> </div> </div> <script> let content = null // 页面加载完不会触发 hashchange,这里主动触发一次 hashchange 事件 window.addEventListener('DOMContentLoaded', function(){ content = document.querySelector("#content") onHashChange() }) // 页面跳转:直接设置hash值的变化 document.getElementById('btn').addEventListener('click',()=>{ location.hash='/detail'; }) // 监听路由变化 window.addEventListener('hashchange', onHashChange) function onHashChange(e) { console.log(e) switch (location.hash) { case "#/": content.innerHTML = "主页的内容" break; case "#/list": content.innerHTML = "列表页的内容" break; case "#/detail": content.innerHTML = "详情页的内容" break; default: content.innerHTML = "404" break; } }</script></body></html>

5.4 小结

hash模式在地址栏上有一个奇怪的符号 #, 让地址看起比较奇怪。

6. history模式6.1 原理

pushState方法 popstate事件

pushState方法

它其实是history对象上的一个方法,其签名是:history.pushState(state,title,[url])。它的作用是:

(1)向当前浏览器会话的历史堆栈中添加一个状态(state),它改变历史记录;

(2)改变地址栏的信息;

(3)它不会刷新页面去发请求。

你现在可以任意打开一个浏览器,然后在控制台中,依次写入如下三句代码,并敲回车运行

history.pushState(null,null,'/a')history.pushState(null,null,'/b')history.pushState(null,null,'/c')

效果图如下:

前端动态路由配置,<路由router-基本使用>

请注意如下几点细节:

  1. 地址栏中有变化。从 baidu.com/a ->baidu.com/b ->baidu.com/c

2. 页面并没有刷新。

  1. 浏览器的前进后退按钮可以使用了。

但是,千万别点击刷新按钮,因为这会导致浏览器真的去请求 baidu.com/a 这个页面,而这个页面是不存的。

replaceState方法

它的功能与pushState类似,不同的地方在于 replace(替换) 效果。

举个例子来说:如果地址的变化是依次用pushState方法从按a,b,c的顺序来修改地址栏,此时,历史记录就是:/a->/b->/c ,此时通过 前进后退按钮就可以在这三条记录中切换。但是,如果 此时使用replaceState,跳转到/d,就会将当前的访问记录替换掉,历史记录就是 /a->/b->/d ,最近那条记录/c 就被/d替换了。具体效果见下图:

前端动态路由配置,<路由router-基本使用>

事件-popstate

当活动历史记录条目更改时,将触发popstate事件。

window.addEventListener('popstate', ()=>{console.log('popState事件',location.pathname)})

我们通过上面的代码就可以去监听popstate事件了。那什么情况下会触发这个事件呢?有如下两类操作:

  1. 点击浏览器的前进,回退按钮
  2. 调用history.back(), history.forward(), history.go()等操作历史记录的方法。

需要注意的是调用 history.pushState() 不会触发 popstate 事件。

如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。

6.2 目标

有了上面的理论基础之后,我们来看看我们将要实现的目标。具体如下

前端动态路由配置,<路由router-基本使用>

它的效果是点击了a标签之后,产生地址栏的变化,同时主体内容也要跟着变化。注意哈,这过程中地址栏中并没有#号。

6.3 思路

可以分成两个部分来完成这个目标:

  1. 劫持a标签的跳转动作,在回调中:
  • 调用pushState,它会修改地址栏的地址(可以通过location.pathname来获取)
  • 根据location.pathname的值来展示内容
  1. 监听popstate事件,当浏览器的前进后退动作发生时,能根据当前的pathname的内容来展示内容。

window.addEventListener('popstate', ()=> { 根据location.pathname的变化来展示内容})

本文关键词:前端动态路由和静态路由的区别,动态配置前端页面,前端路由的几种模式,前端动态路由配置命令,前端动态路由的路由规则怎么写。这就是关于《前端动态路由配置,<路由router-基本使用>》的所有内容,希望对您能有所帮助!更多的知识请继续关注《小知识》百科知识网站:http://www.370300.com!

以上就是关于“前端动态路由配置,<路由router-基本使用>”的所有内容,希望分享的内容对您有帮助!更多的相关知识内容,请继续关注《小知识百科站》网站:http://www.370300.com/!。

猜您喜欢

  • 用冻干粉的护肤顺序

    ①用冻干粉的护肤顺序洗脸、冻干粉、保湿乳液、保湿霜。冻干粉补水面膜的使用说明和一般补水面膜是相同的,洗脸后将冻干粉补水面膜取下敷在脸部,滞留20分鐘上下,将剩下的精粹轻轻地推拿,擦抹在手脚或是人体的别...

    2023-12-11
  • 为什么金鱼会翻身却没死

    1:为什么金鱼会翻身却没死金鱼患鱼鳔失调症,冬天发病,温度升高后又会恢复正常。是一种非传染性鱼病,只在冬天才发生,怕寒的透明鱼最为常见。症状:冬天气温下降,有些鱼侧卧池底,用手触动它,会摆动几下尾鳍游...

    2023-12-17
  • win7强制进入安全模式的方法

    演示机型:华为MateBookX系统版本:win71、在电脑开机的时候,进入Windows系统启动画面之前按下F8键,会出现系统多操作启动菜单,选择安全模式,回车即可直接进入安全模式。2、启动计算机的...

    2023-12-27
  • 相机光圈怎么调

    1.首先,将相机的拍摄档调整到A档,A档代表光圈优先档位,就可以对光圈进行调整了。2.找到相机的肩屏,一般拨动肩屏可以调整光圈大小,控制进光量,调节明暗。3.较小的f值表示较大的光圈,f/1是进光量最...

    2023-12-18
  • 社保卡里面的钱可以取出来吗

    1、社保卡里的钱取不出来。2、《中华人民共和国社会保险法》第十七条参加基本养老保险的个人,因病或者非因工死亡的,其遗属可以领取丧葬补助金和抚恤金。3、在未达到法定退休年龄时因病或者非因工致残完全丧失劳...

    2023-12-23
  • 口袋妖怪红宝石怎么去飞音镇详细

    打败山上的看守缆车的小卒,再通过岩浆近路去北方的城镇,经过城镇去流星瀑布,打败邪恶组织,再回烟凸山坐缆车的地方。坐缆车上山,打败所有在山上敌人,将陨石从机器上拿下来,再从下方的凹凸山道去飞音镇。《口袋...

    2023-12-08
  • 12月12日肇庆市天气 肇庆市天气预报7天查询

    12月12日肇庆市天气肇庆市今日不会下雨也不会下雪2023年12月12日,周二温度:18°~24°,多云,无持续风向,风力小于3级紫外线指数:强,涂擦SPF大于15、PA+防晒护肤品。感冒指数:少发,...

    2023-12-11
  • 太阳黑子活动与气候变化

    太阳辐射产生的热量是地球上陆地、海洋和空气的总能量的来源。没有太阳,空气、海洋就不会运动,万物不可能生长;地球上就不可能有从寒带到热带这些多彩多姿的气候;不可能有四季,也不可能有阴雨、雷电这些千变万化...

    2023-12-08
  • 2023愚人节怎么整人 2023愚人节整人方法大全

    导读:愚人节也称万愚节,是西方社会民间传统节日。在节日这一天,不分男女老幼,可以互开玩笑、互相愚弄欺骗以换得娱乐。这么做当然是为了给平淡的生活增添一些乐趣,看着他们上当然后在开怀大笑。那么,2023愚...

    2023-12-17
  • 求女主角是精灵或人鱼的言情小说

    (1)求女主角是精灵或人鱼的言情小说1、《花心王爷人鱼妃》,言情小说,作者凌语溪,已完结。2、《缠绵不休:人鱼情人》,言情小说,作者安一一,已完结。3、《拉菲草之恋》,言情小说,作者黄珍,已完结。4、...

    2023-12-17