惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Know Your Adversary
Know Your Adversary
云风的 BLOG
云风的 BLOG
Recent Announcements
Recent Announcements
F
Fortinet All Blogs
B
Blog
罗磊的独立博客
宝玉的分享
宝玉的分享
Vercel News
Vercel News
Martin Fowler
Martin Fowler
N
Netflix TechBlog - Medium
P
Proofpoint News Feed
T
Threatpost
Security Latest
Security Latest
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Stack Overflow Blog
Stack Overflow Blog
I
Intezer
P
Privacy International News Feed
D
Docker
月光博客
月光博客
博客园 - 三生石上(FineUI控件)
M
MIT News - Artificial intelligence
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
L
Lohrmann on Cybersecurity
Google DeepMind News
Google DeepMind News
The Last Watchdog
The Last Watchdog
A
Arctic Wolf
IT之家
IT之家
S
SegmentFault 最新的问题
S
Securelist
博客园 - 叶小钗
N
News and Events Feed by Topic
F
Full Disclosure
Security Archives - TechRepublic
Security Archives - TechRepublic
Engineering at Meta
Engineering at Meta
Hacker News: Ask HN
Hacker News: Ask HN
博客园 - Franky
GbyAI
GbyAI
AI
AI
Y
Y Combinator Blog
WordPress大学
WordPress大学
Latest news
Latest news
Microsoft Security Blog
Microsoft Security Blog
人人都是产品经理
人人都是产品经理
N
News | PayPal Newsroom
The Cloudflare Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
I
InfoQ

博客园 - 大山008

若依导出excel时decimal数据千分位格式化 SpringBoot如何引入deepseek-多轮对话 EasyExcel实现百万级数据导入导出 SpringAMQP整合RabbitMQ使用 win11安装redis步骤详解 ftp与sftp工具类 stream流的一些常用用法 子类的toString方法如何打印父类的属性 MySQL常见的几种优化方案 关于若依AsyncFactory的一些思考,记录一下 MYSQL中substring_index()用法 mybatis sql 解决 in 参数过多的问题 MySQL之json数据操作 mybatis查询返回map键值对的问题 validate校验,记录一种思路 在vue中用multipart/form-data方式上传文件并同表单同步提交数据 Java微信转发及网络检测 生成带有二维码的海报 java将指定文件夹下面的所有图片压缩到指定大小以内并保存图片 Lock与ReentrantLock、Synchronized
Vue 路由跳转、路由传参、跳转区别、传值取值
大山008 · 2023-05-09 · via 博客园 - 大山008


版权声明:本文为CSDN博主「灬ManongLai」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_39453402/article/details/127958797

1、router-link

<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}">
<router-link :to="{name:'home', params: {id:1}}"> 
// 取参  this.$route.params.id
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
{ path: '/home/:id', ... }
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
<router-link :to="{name:'home', query: {id:1}}">
// 取参  this.$route.query.id
// 路由可不配置
// router-link中链接如果是'/'开始就是从根路由开始
// 如果开始不带'/',则从当前路由开始。

2、this.$router.push()

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// 取参 this.$route.query.id
this.$router.push({name:'home',params: {id:'1'}})
// 取参 this.$route.params.id
// path 和 Name路由跳转方式,都可以用query传参
// params传参,push里面只能是 name:'xxx',不能是path:'/xxx'
// 因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined
// query:类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样刷新页面id还在;
// params:类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失;

3、this.$router.replace()

// 用法同上,push。以下是示例及特别点
// 声明式
<reouter-link :to="..." replace></router-link>
// 编程式:
router.replace(...)
// push方法也可以传replace
this.$router.push({path: '/homo', replace: true})

// 跳转到指定的URL,替换history栈中最后一个记录
// 点击后退会返回至上一个页面。(A----->B----->C 结果B被C替换 A----->C)

// 设置replace属性(默认值:false)的话,当点击时,会调用router.replace()
// 而不是router.push(),于是导航后不会留下 history记录 。
// 即使点击返回按钮也不会回到这个页面。
// 加上replace: true时,它不会向 history 添加新记录,而是跟它的方法名一样——替换当前的history记录

4、this.$router.go(n)

this.$router.go(n)
// 向前或者向后跳转n个页面,n可为正整数或负整数
// 在浏览器记录中向前进一步,等同于history.forward()
router.go(1)
// 后退一步记录,等同于history.back()
router.go(-1)

5、跳转区别

this.$router.push
//向 history 栈中添加一个记录,点击后退会返回到上一个页面
this.$router.replace
//不向 history 栈中记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n)
// 向前或者向后跳转n个页面,n可为正整数或负整数