Vue-路由跳转的几种方式和路由重定向
2024-09-06 17:38:18
一、标签路由 router-link
注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
1、不传参 <router-link :to="{name:'Home'}">
<router-link :to="{path:'/home'}"> 2、传参 <router-link :to="{name:'Home', params: {id:1}}">
<router-link :to="{path:'/home', params: {id:1}}">
// params传参数
// 路由配置 path: "/home/:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id <router-link :to="{name:'Home', query: {id:1}}">
// query传参数 (类似get,页面url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
二、编程式路由 this.$router.push()
1、不传参
this.$router.push('/home')
this.$router.push({name:'Home'})
this.$router.push({path:'/home'}) 2、传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// params传参数
// 路由配置 path: "/home/:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id this.$router.push({name:'Home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// query传参数 (类似get,页面url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
最新文章
- swift 学习笔记
- java设计模式之适配器模式
- JQuery data API实现代码分析
- mobile cpu上禁用alpha test的相关总结
- codeforces 711C Coloring Trees(DP)
- LINUX开启允许对外访问的网络端口
- leetcode:Palindrome Number
- Javascript 取小数点后面N位
- Cross-origin resource sharing--reference
- 性能是全新的 SEO
- iOS开发之自己封装的提示框(警告框)样式BHAlertView
- LeetCode算法题-Range Sum Query Immutable(Java实现)
- python全栈开发day75-用户注册页面ajax实现,用户头像上传、预览、展示
- 查看 java 中的编译的字节码文件
- Swagger注解
- centos7配置Hadoop集群环境
- 在浏览器中使用Javascript
- solr学习
- QTcpSocket使用过程中的一些问题记录
- 20145337 《网络对抗技术》Web基础
热门文章
- c++ 踩坑大法好 枚举
- ubuntu 报错 Unable to locate package
- 【Python】输出12个星座
- redis 的安装和使用
- springboot中集成memcached
- anniversary party_hdu1520
- 第五十二篇 Linux相关——数据库服务MySQL
- AcWing 差分一维加二维
- koa2第一天 安装koa2found 1 low severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details
- Django中的check指令和sqlmigrate指令