vue-router全部搞定(附源码)

源码下载链接(先转存,后下载)https://pan.quark.cn/s/b0c6edd68c21

怎么用vue-cli搭建项目

我们固然可以用传统html+js的方式来搭建vue项目,但是如果组件很多,就需要通过Vue.component的方式一个个去引入,很麻烦。 我们可以用脚手架来创建vue-cli项目。

1)安装vue-cli脚手架

npm install -g @vue/cli

2)项目初始化

vue create hello-world

image.png

选择vue的版本,用Vue2

image.png

开始创建了

image.png

创建完毕了

image.png

根据提示启动项目,监听在8080端口。

image.png

vue-router

为什么要用vue-router?以上个项目为例,主应用文件是App.vue

image.png

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}}
</script>

我们看到引入了一个HelloWorld组件,如果我们想看其他页面怎么办?因为是单页SPA应用,不好意思,目前你还真就没有办法。 对于一个vue.js应用,其实就只有一个App.vue组件能看到,如果你想看其他页面,就必须通过vue-router。 vue-router解决了路由和组件的对应关系问题,路由你可以理解为网页的url,不同的url对应的不同的路由,然后通过路由我们能找到不同的页面。

1)安装vue-router
npm i -S vue-router

-S 代表要加入到项目的依赖,因为我们在运行项目的时候就要用到vue-router,所以要加上。

image.png

这里有个坑,默认下载的vue-router是最新的,而我们是vue2.0的项目,版本不匹配。会报这个错误:

image.png

这个时候你首先应该卸载原有的vue-router版本,安装对应的版本,卸载命令如下:

npm uninstall vue-router

卸载完成之后,安装对应版本,安装你想安装的版本时在vue-router后面加@对应的版本号,安装命令如下:

npm install vue-router@3.5.2

image.png

最后,重新安装后,要重启服务!

2)使用vue-router插件

image.png

image.png

3)初始化Route
import AComponent from './components/A'
import BComponent from "./components/B";//初始化路由(参数是数组)
const routes = [{path:'/a',component:AComponent},{path:'/b',component:BComponent}
];
const router = new Route({routes,mode:'hash' //默认hash模式,会有#
});new Vue({render: h => h(App),router, // 路由要作为参数传入根 Vue实例
}).$mount('#app')

引入组件的时候,可以用@代替/src目录,这属于别名。 所以我们也可以写成这样:

import AComponent from '@/components/A'
import BComponent from "@/components/B";

当我们用代码提示引入AB组件的时候,默认就是这种。

A组件:

<template><h1>A</h1>
</template><script>
export default {name: "AComponent"
}
</script>

B组件:

<template><h1>B</h1>
</template><script>
export default {name: "BComponent"
}
</script>

最后,在App.vue上添加

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><router-view /></div>
</template>

我们在浏览器输入http://localhost:8080/#/a 就可以访问A组件,B组件同理。

image.png

但是很显然,我们只有手动改变url去访问不同的页面,这是不合适的,改用router-link

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><ul><li style="list-style: none"><router-link to="/a">A页面</router-link></li><li style="list-style: none"><router-link to="/b">B页面</router-link></li></ul><router-view /></div>
</template>

这个用法就类似于a标签

image.png

router嵌套和重定向

嵌套就是一个路由加一个children属性,里面又有其他路由,然后夫路由的页面也要加上,否则就是给静态的,看不到子路由。注意,子路由的path不要加 / ,否则还是全路径的,嵌套了个寂寞啊。

const routes = [{path:'/a',component:AComponent,children: [{path:'aa',component:AA}]},{path:'/b',component:BComponent}
];

a页面,加动态路由

<template><div><h1>A</h1><router-view /></div></template>

地址栏访问:http://localhost:8080/#/a/aa

image.png

成功,再来说说重定向,a在实际开发中,很可能是左侧菜单栏,所以我们应该要再配置一个默认的首页,当你打开A页面,A页面里面的动态路由应该显示默认的首页,而不是空白一片。

const routes = [{path:'/a',component:AComponent,redirect:'/a/aa', //这里要写全路径children: [{path:'aa',component:AA}]},{path:'/b',component:BComponent}
];

路由参数

有时候,我们希望采用restful的路由风格,跳转路由的时候携带参数,可以这样做。

const routes = [{path:'/a',component:AComponent,redirect:'/a/aa', //这里要写全路径children: [{path:'aa',component:AA},{path:':id',component:AA}, //这样携带参数,相当于/a/:id]},{path:'/b',component:BComponent}
];

然后在AA组件中这样去接收

<template><h1>AA<div>{{$route.params.id}}</div></h1>
</template>

当我们访问http://localhost:8080/#/a/111

image.png

这样就拿到参数了,注意这种参数路由的优先级比普通路由低,也就是如果你输入/a/aa,会优先匹配普通路由,而不是这个。

编程式路由

其实更多的时候,我们希望手动用js跳转路由,并携带参数,就要用到编程式路由了。 在B组件,我们做页面跳转。

<template><h1>B<button @click="gotoA">跳转到A页面</button></h1>
</template><script>
export default {name: "BComponent",methods: {gotoA(){this.$router.push({path:'/a/aa',query:{name:'keke'}});}}
}
</script>

然后AA组件这样去接收参数

<div>{{$route.query.name}}</div>

最终效果:

image.png

image.png

以上所有的路由跳转,都会在history进行缓存,即可以通过浏览器的回退按钮,退回到上一步。

image.png

如果你不想回退,就不要用push,改成replace。 如果你想用js回退,就用 this.$router.go(-1)

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

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

相关文章

mathematica中针对三维图中的颜色和填充透明度进行指定

颜色指定使用的命令为&#xff1a;PlotStyle 填充的透明度使用的命令为&#xff1a;FillingStyle 示例代码&#xff1a; Clear["Global*"] Plot3D[{Sin[x^2 y], Sin[x^2 - y]}, {x, -2, 2}, {y, -2, 2}, PlotStyle -> {Directive[Red, Specularity[White, 100…

1.VMware软件的安装与虚拟机的创建

1. VMware软件的安装 1.1 为什么需要虚拟机 嵌入式Linux开发需要在Linux系统下运行&#xff0c;我们选择Ubuntu。   1、双系统安装     有问题&#xff0c;一次只能使用一个系统。Ubuntu基本只做编译用。双系统安装不能同时运行Windows和Linux。   2、虚拟机软件   …

Golang Context详解

文章目录 基本介绍context源码剖析Context接口emptyCtxcancelCtxtimerCtxvalueCtx context使用案例协程取消超时控制数据共享 基本介绍 基本介绍 在Go 1.7版本中引入了上下文&#xff08;context&#xff09;包&#xff0c;用于在并发编程中管理请求范围的数据、控制生命周期、…

k8s 1.28 搭建rabbitmq集群

1.环境 1.1 k8s 1.28 1.2 rabbit 3.8 1.3 工作空间default 1.4 注意&#xff0c;内存最好充足一点&#xff0c;因为我就两个节点一个master、一个node&#xff0c;起初我的node是8g&#xff0c;还剩3~4G&#xff0c;集群竟然一直起不来&#xff0c;后来将虚拟机内存扩大&#x…

数字孪生智慧水利:精准管理与智能决策的新时代

图扑数字孪生技术在智慧水利中的应用&#xff0c;通过虚拟模型与真实水利系统的无缝连接&#xff0c;实现对水资源和水利工程的全面监控和精细管理。实时数据采集与动态模拟提升了水利系统的预测和响应能力&#xff0c;从洪水预警到水质监测&#xff0c;数字孪生助力各项决策更…

【Meetup】探索Apache SeaTunnel的二次开发与实战案例

在数据科技快速演进的今天&#xff0c;业务场景的复杂化和数据量的激增&#xff0c;推动了大数据技术的迅速发展&#xff0c;在众多开源大数据处理工具中&#xff0c;Apache SeaTunnel以其强大的数据集成能力&#xff0c;成为众多企业的首选。 但随着应用深入&#xff0c;企业面…

Java_Map集合

认识Map集合 Map集合称为双列集合&#xff0c;格式&#xff1a;{key1value&#xff0c;key2value2,key3value3,…},一次需要存一对数据作为一个元素。 Map集合的每个元素“Keyvalue” 称为一个键值对/键值对对象/一个Entry对象&#xff0c;Map集合也被叫做“键值对集合” Map集…

ViT:2 理解CLIP

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提…

简单介绍一下vim

简单介绍一下vim 一、vim是什么&#xff1f;二、vim的优点三、vi/vim的使用命令模式输入模式底线命令模式 四、vi/vim 按键说明&#xff08;一&#xff09;命令模式可用的光标移动、复制粘贴、搜索替换等移动光标的方法:搜索替换的方法删除、复制与贴上的方法 &#xff08;二&a…

Unity 集成 FMOD 音频管理插件 2.02

Unity 集成 FMOD 音频管理插件 2.02 3. 集成教程&#xff1a;3.1 设置Unity项目3.2 设置FMOD项目3.3 设置 FMOD for Unity3.4 添加声音&#xff1a;卡丁车引擎3.5 添加声音&#xff1a;氛围3.6 添加声音&#xff1a;音乐3.7 删除现有音频3.8 下一步 10. 脚本 API 参考10.1 基础…

linux的持续性学习

安装php 第一步&#xff1a;配置yum源 第二步&#xff1a;下载php。 yum install php php-gd php-fpm php-mysql -y 第三步&#xff1a;启动php。 systemctl start php-fpm 第四步&#xff1a;检查php是否启动 lsof -i :9000 计划任务 作用&am…

设计模式- 责任链模式(行为型)

责任链模式 责任链模式是一种行为模式&#xff0c;它为请求创建一个接收者对象的链&#xff0c;解耦了请求的发送者和接收者。责任链模式将多个处理器串联起来形成一条处理请求的链。 图解 角色 抽象处理者&#xff1a; 一个处理请求的接口&#xff0c;可以通过设置返回值的方…

SpringBootWeb 篇-深入了解 Redis 五种类型命令与如何在 Java 中操作 Redis

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Redis 概述 1.1 Redis 下载与安装 2.0 Redis 数据类型 3.0 Redis 常见五种类型的命令 3.1 字符串操作命令 3.2 哈希操作命令 3.3 列表操作命令 3.4 集合操作命令 …

Webpack 从入门到精通-基础篇

一、webpack 简介 1.1 webpack 是什么 webpack 是一种前端资源构建工具&#xff0c;一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析&#xff0c;打包生成对应的…

【深度学习】【机器学习】支持向量机,网络入侵检测,KDD数据集

文章目录 环境加载数据归一化数据训练模型用测试数据集给出评估指标准确率召回率预测某个输入数据随便取一行数据加载训练好的SVM支持向量机模型并预测 全部数据和代码下载 环境 之前介绍过用深度学习做入侵检测&#xff0c;这篇用向量机。 环境Python3.10 requirements.txt…

Vuex3学习笔记

文章目录 1&#xff0c;入门案例辅助函数 2&#xff0c;mutations传参辅助函数 3&#xff0c;actions辅助函数 4&#xff0c;getters辅助函数 5&#xff0c;模块拆分6&#xff0c;访问子模块的state辅助函数 7&#xff0c;访问子模块的getters辅助函数 8&#xff0c;访问子模块…

虚拟机调用摄像头设备一直 select timeout问题的解决

在VMware里面调用v4l2-ctl捕获图像&#xff0c;或者opencv的VideoCapture(0)捕获图像&#xff0c;或者直接调用v4l2的函数&#xff0c;在streamon后&#xff0c;调用select读取数据&#xff0c;均会一直提示select timeout的问题&#xff0c;大概率是由于USB版本的兼容性造成的…

每日5题Day21 - LeetCode 101 - 105

每一步向前都是向自己的梦想更近一步&#xff0c;坚持不懈&#xff0c;勇往直前&#xff01; 第一题&#xff1a;101. 对称二叉树 - 力扣&#xff08;LeetCode&#xff09; class Solution {public boolean isSymmetric(TreeNode root) {if(root null){return true;}Stack<…

类和对象(下+)_const成员、初始化列表、友元、匿名对象

类和对象&#xff08;下&#xff09; 文章目录 类和对象&#xff08;下&#xff09;前言一、const成员二、友元1.友元函数2.友元类 三、初始化列表四、explicit关键字五、匿名对象总结 前言 static成员、内部类、const成员、初始化列表、友元、匿名对象 一、const成员 将cons…

网络安全难学吗?2024该怎么系统学习网络安全?

学习网络安全需要循序渐进&#xff0c;由浅入深。很多人对网络安全进行了解以后&#xff0c;就打算开始学习网络安全&#xff0c;但是又不知道怎么去系统的学习。 网络安全本身的知识不难&#xff0c;但需要学习的内容有很多&#xff0c;其中包括Linux、数据库、渗透测试、等保…