Vue3专栏项目 -- 三、使用vue-router 和 vuex(上)

前面我们开发了两个页面的组件,现在我们需要把它们分成几个页面了,那么一个网页多个页面我们都熟悉,针对不同的url渲染不同的html静态页面,这是web世界的基本工作方式。

有时候我们点击一个东西,地址栏的路由跳转,并且刷新了页面跳转到了新的页面;还有一种就是我们点击一个东西,地址栏的路由跳转了,页面内容变了,不过它没有刷新没有跳转到新的页面,这是通过window的history.pushState()方法来跳转到对应的url,这种就是SPA

history.pushState()方法中有三个参数,一个状态对象,一个标题(目前被忽略),和可选的URL

一般的场景就是先跳转到这个路由,然后JS通过Ajax发送异步请求获得需要的数据,然后再用document.getElementById().innerHTML=``的方式给他动态渲染出来

一、什么是SPA应用?

·一种Web应用程序或网站

·在和用户交互的时候不会跳转到其他的页面

·由JS实现URL变换和动态变换HTML的内容

SPA应用的优点:

·速度快,第一次下载完成静态文件,跳转不需要再次下载

·体验好,整个交互趋于无缝,更倾向于原生应用

·为前后端分离提供了实践场所

二、添加路由页面基础结构

如下图,在src下新建views的文件夹,就是页面,一个Home.vue首页,一个Login.vue登录页

三、vue-router 安装和使用

我们要先去安装vue-router,npm install vue-router@next --save 即安装最新版本的vue-router

我们来看看整个页面的结构,共性是头部标题GlobalHearder和Footer底部是都有的,然后中间的内容是随着路由进行不断的变化的。所以我们的组件结构也应该跟着发生变化

如下,App.vue是整个应用的入口组件,在所有页面中都使用的组件我们就放在这个App.vue中,比如说GlobalHearder和Footer这两个在哪个页面都是要出现的,所以我们放在这里,而跟随这个路由不断变化的页面我们放在这个紫色区域里称为页面内容,当url为默认即 / 的话我们就渲染这个Home.vue这个组件,假如url为 /login 我们就渲染这个login.vue等等

当vue-router被添加到页面当中去,它就会内置两个组件,帮我们完成这个任务。

一个称为router-link,这个组件和a链接很想,但是它是用来组件内进行导航的,通过传入“ to ”属性来指定链接,然后就可以进行导航了

另一个称为router-view,它被称为路由出口,路由匹配到的组件都会将渲染到这里,所以图中那个紫色区域就是一个router-view

四、vue-router 配置路由、通过router-link实现路由跳转

我们需要在main.ts中从vue-router中引入createRouter,通过createRouter,这个history决定了你采用哪种类型的路由,是哈希hash还是web,我们上面讲过HTML5的history API ,它是使用pushState来实现路由的变化。

在这个方法之前还有一种称为哈希,它实现一样的功能,哈希格式就是'url#create.html',它是为了解决之前不支持HTML5history的一种实现方式,它是HTML5之前出现的,它从一个哈希值转换为另一个哈希值,比如从'url#create.html' 转换为 'url#home.html' 这时候这个页面是不会刷新的,但是它有挺多缺点,唯一优点就是支持各种旧版浏览器。

所以我们这里采用history的方式,不采用哈希的方式。为了使用history这种方式,我们就需要从vue-router中导入createWebHistory,如果是哈希我们就需要导入createHashHistory

然后定义路由信息,routes数组,里面都是一个个对象,对象中就是path路径、name名称、component组件

我们想点击那个开始写文章的按钮,就跳转到另外一个路由跳转到登录,这时候就需要使用到提供好的组件router-link,我们到GlobalHearder中添加,把登录注册替换成router-link,它的用法和a链接是一样的,只不过它跳转到路由的属性称为to

如下,把a标签改为router-link

如下,点击登录即可跳转到登录页面,点击写作专栏就跳转到首页

五、vue-router 添加路由(给columnDetail添加动态路由参数,使得可以从url中获取column id,从而得到当前要访问的是哪个专栏内容,可以跳转到变化的url)

还有一个常见的需求就是在组件中拿到url的不同参数,从而进行下一步的处理,有一系列的页面应该都很需要这样的数据,比如我们接下来要做的colimnDetail页面,我们可能会需要url上的数据,比如我们需要url上这个专栏详情页的id,从而去获取具体是哪个专栏内容这样子。

我们去了解一下url的结构,下图就描述了url整个结构

protocol就是协议,auth字段由username和password组成的,接下来是host,由hostname网址和port端口号组成,接下来是pathname,之后是query一般是一个值等于另外一个值,一般会添加一些检索条件,有多个的时候可以用&符号连接起来,最后就是哈希hash值,是在#后

我们先创建一个组件

如何访问url这些参数

如下,我们url中添加一个query,如下?后添加search=123,那么里面就会添加一个query,query中就会添加一个search:123

我们再添加一个哈希值即加个#aaa,那么也会在里面假如hash值

我们的任务是根据column id来获取相对应的内容,所以我们在url上面就需要有个动态变化的值来指代它的id,这时候我们就可以通过vue-router来帮助我们,它有一个特性就称之为动态路由匹配。

如下,我们可以在vue-router的路由路径中使用动态路径参数来达到这个效果,比如如下可以path:'/user/:id' ,在后面加上动态路径参数 id,以冒号开头

如下,给path:'/column' 添加上:id ,变成path:'/column/:id' ,这样就修改成了动态路由的参数

然后我们再来改一下,给url加上id,如下

现在的问题就是如何跳转到类似的url,之前使用router-link编写都是写死的url,现在我们要跳转到变化的url

比如我们点击首页某个专栏后,就跳转到这个专栏内容的页面,我们怎么做?

如下,我们把进入专栏这个按钮从a链接标签变成router-link标签,然后这个to要变成动态的,要往to中传入一个对象,这个对象中应该有你要前往的router name以及params

我们看看结果,我们点击首页某个专栏内容的进入专栏按钮,发现它能跳转到该专栏,url中也能拿到这个专栏的id

还有一个方式是使用这个模板字符串,都一样的,这个就简单一些

我们除了使用router-link进行跳转,我们还需要在程序中也就是JavaScript中进行跳转,比如登录成功,我们就需要把它跳转到首页,这时候我们就可以使用vue-router的另外一个钩子函数

如下我们那login.vue做实验

注意导入的这个useRoute和useRouter作用是不同的,useRoute是获取路由信息,useRouter是定义路由的一系列行为

如下,在login.vue中加入useRouter,输入密码提交后,如下加入验证通过,则给router中push这个名为column的id为1的路径

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/13285.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DOS学习-目录与文件应用操作经典案例-dir

欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一.前言 二.使用 三.练习 一.前言 dir是"directory"(目录)的缩写,它主要用于展示某个磁盘上的全部或特定文件目录。在DOS操作系统中&#…

友元是一种允许某些外部函数或类访问另一个类的成员的机制

在C编程语言中,“友元”(Friend)是一种允许某些外部函数或类访问另一个类的私有(private)和保护(protected)成员的机制。友元功能在C中是非常有用的,尤其是在实现某些特定的功能时&a…

替换掉Springboot框架中的Tomcat,使用undertow

替换掉Springboot框架中的Tomcat,使用undertow 1、前言2、四种WEB服务器介绍2.1、Tomcat2.2、Undertow2.3、Jetty2.4、Netty 3、如何替换Tomcat?并使用Undertow3.1、pom修改 4、参考目录 1、前言 在SpringBoot框架中,我们使用最多的是Tomcat&…

【前段】开发五子棋小游戏全流程

使用前端技术开发五子棋小游戏 在这篇博文中,我们将详细介绍如何使用HTML、CSS和JavaScript开发一个简单的五子棋小游戏。我们将展示如何初始化棋盘、处理用户交互以及实现胜负判定。特别是,我们将着重介绍胜负判定的逻辑实现。 完整代码我放在了这里&a…

push to origin/master was rejected解决方案之一

如果你是git小白,并且其他帖子的方法都不行,可以一试 在你的远程库(我这个是gitee)设置中的邮箱设置里不勾这个选项 然后就没有然后了。

html标签属性解析

jar包 <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.13.1</version> </dependency> 解析方法 private String parseOriginUrl(String tzurl) { if (StrUtil.isEmpty(tzurl)) { retu…

宣布推出 Search AI Lake 和 Elastic Cloud Serverless 以扩展低延迟搜索

作者&#xff1a;来自 Elastic Ken Exner 今天&#xff0c;我们很高兴地宣布 Search AI Lake 和 Elastic Cloud Serverless。 Search AI Lake 是一种针对实时应用程序进行优化的开创性云原生架构&#xff0c;它将扩展的存储容量与低延迟查询以及 Elasticsearch 强大的搜索和 AI…

26 | MQTT协议:如何支持海量的在线IoT设备?

MQTT 和其他消息队列的传输协议有什么不同&#xff1f; 从宏观上来说&#xff0c;MQTT 和其他消息队列采用的传输协议是差不多的。它采用的也是发布 - 订阅的消息模型。网络结构上&#xff0c;也是 C/S 架构&#xff0c;IoT 设备是客户端&#xff0c;Broker 是服务端&#xff…

视频监控平台智能边缘分析一体机视频存储平台打手机检测算法

智能边缘分析一体机的打手机检测算法是一种集成了先进图像处理、计算机视觉和人工智能技术的解决方案&#xff0c;专门用于实时监测和识别监控场景中的打手机行为。 在提到“打手机检测算法”时&#xff0c;可能是指一种能够识别和检测使用手机行为的算法。这种算法可以应用于多…

winform,子线程里messagebox如何模态阻止ui线程

在WinForms中&#xff0c;如果你想在子线程中显示一个MessageBox并阻止UI线程&#xff0c;可以使用Invoke或BeginInvoke方法来确保MessageBox是在UI线程上显示的。这是因为WinForms控件不是线程安全的&#xff0c;所有的UI操作都应该在UI线程上进行。 以下是一个示例代码&…

力扣HOT100 - 300. 最长递增子序列

解题思路&#xff1a; 动态规划 class Solution {public int lengthOfLIS(int[] nums) {if (nums.length 0) return 0;int[] dp new int[nums.length];int max 0;Arrays.fill(dp, 1);for (int i 0; i < nums.length; i) {for (int j 0; j < i; j) {if (nums[j] <…

文字生成数字员工!实在AI Agent化身“六边形战士”落地千行百业

2023年8月&#xff0c;实在智能在全行业首发“一句话生成数字员工”的实在AI Agent智能体产品&#xff0c;即实在Agent智能体&#xff0c;也是TARS-RPA Agent智能体数字员工&#xff0c;其同时具备LLM大模型的对话式交互能力和RPA的流程自动化能力&#xff0c;有“大脑”&#…

C# .Net8 switch 的用法

在 .net 8中&#xff0c;switch 不需要再和传统的写法一样了&#xff0c;会更加的方便 创建一个 .net 8 控制台项目 switch 的写法没必要和以前一样 namespace SwitchTest {internal class Program{static void Main(string[] args){int day 3;var week day switch{1 > &…

Go语言不再难!跟随ChatGPT轻松攻克编程难关

开发人员&#xff08;包括我在内&#xff09;通常偏好边学习边实践的方式。这不仅仅是我与LLM协作的核心准则之一&#xff0c;也是最关键的准则&#xff1a;因为你是在任务导向的学习过程中积累知识&#xff0c;这种学习方式不是预先的——它基于实时的、可感知的情境。 当资深…

安防监控视频平台EasyNVR级联视频上云系统EasyNVS出现“Login error”报错

EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力&#xff0c;能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、W…

##21 深入理解文本处理:使用PyTorch进行NLP基础操作

文章目录 前言简介文本预处理实现分词构建词汇表 文本向量化构建简单的文本分类模型结论 前言 在现代深度学习应用中&#xff0c;文本处理是不可或缺的一部分&#xff0c;尤其在自然语言处理&#xff08;NLP&#xff09;领域。借助强大的框架如PyTorch&#xff0c;我们可以更加…

一篇文章搞懂退火算法

退火算法,全称为模拟退火算法(Simulated Annealing,SA),是一种通用概率算法,用来在给定一个大的搜寻空间内找寻问题的近似最优解。模拟退火算法灵感来源于固体物理学中的退火过程,这一过程中,物质被加热后再缓慢冷却,原子会在加热过程中获得较大的运动能量,随着温度的…

KIOXIA CD8P-R 1.92TB SSD KCD81PUG1T92数据中心读密集型

KIOXIA全新推出的CD8P-R系列数据中心级读密集型SSD - KCD81PUG1T92型号。这款SSD不仅在性能和可靠性方面表现出色,还能为您的数据中心应用带来前所未有的体验。 首先,让我们一起来看看KCD81PUG1T92的关键亮点: 超高性能: KCD81PUG1T92采用PCIe 5.0和NVMe 2.0规范,最高可提供…

JSpdf,前端下载大量表格数据pdf文件,不创建dom

数据量太大使用dom》canvas》image》pdf.addimage方法弊端是canvas超出 浏览器承受像素会图片损害&#xff0c;只能将其切割转成小块的canvas,每一次调用html2canvas等待时间都很长累积时间更长&#xff0c;虽然最终可以做到抽取最小dom节点转canvas拼接数据&#xff0c;但是死…

Linux基础之进程的优先级

目录 一、进程优先级的概念 二、进程优先级的查看 三、怎么修改进程优先级 四、进程饥饿 一、进程优先级的概念 cpu资源分配的先后顺序&#xff0c;就是指进程的优先权&#xff08;priority&#xff09;。优先权高的进程有优先执行权利。配置进程优先权对多任务环境的linu…