vue-router路由如何实现传参
tip: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空。(传参强烈建议适用string)
也可以选用sessionstorage/localstorage/cookie存储,可以参考我的另一边文章:sessionstorage、localstorage与cookie
params:参数不会显示到路径上
1:配置路径rutes
export default new Router({ routes: [ { path: '/testVueRouter', name: 'TestVueRouter', component: TestVueRouter }, { path: '/testVueRouterTo', // 一定要写name,params必须用name来识别路径 name: 'TestVueRouterTo', component: TestVueRouterTo } ] })
2:传递参数:用$router
<!-- test-vue-router页面 --> <template> <div> <a @click="routerTo()">query传参</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ name: `TestVueRouterTo`, params: { page: '1', code: '8989' } }) } } } </script>
3:接受参数:用$route,少个r,注意啦
<!-- test-vue-router-to页面 --> <template> <div> </div> </template> <script> export default{ data() { return { page: '', code: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { this.page = this.$route.params.page this.code = this.$route.params.code console.log('page', this.page) console.log('code', this.code) } } } </script>
query:最好也用name来识别,保持与params一致性,好记了,路径传参
1:路径配置(跟params一样,代码不写了)
2:传递参数页
<!-- test-vue-router页面 --> <template> <div> <a @click="routerTo()">query传参</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ name: `TestVueRouterTo`, // 只是把query改了,其他都没变 query: { page: '1', code: '8989' } }) } } } </script>
3:接受参数
<!-- test-vue-router-to页面 --> <template> <div> </div> </template> <script> export default{ data() { return { page: '', code: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { // 只是改了query,其他都不变 this.page = this.$route.query.page this.code = this.$route.query.code console.log('page', this.page) console.log('code', this.code) } } } </script>
图片区:
下面我们采用path: '/testVueRouterTo'
1:query(成功)
<!-- test-vue-router页面 --> <template> <div> <a @click="routerTo()">query传参</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ path: '/testVueRouterTo', query: { page: '1', code: '8989' } }) } } } </script>
<!-- test-vue-router-to页面 --> <template> <div> <!-- <span>{{page}}</span> <span v-show="code === '89'">{{code}}</span> <span>{{password}}</span> --> </div> </template> <script> export default{ data() { return { page: '', code: '', password: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { // debugger this.page = this.$route.query.page this.code = this.$route.query.code console.log('page', this.page) console.log('code', this.code) } } } </script>
2:params:(不成功)
<!-- test-vue-router页面 --> <template> <div> <a @click="routerTo()">params传参</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ path: '/testVueRouterTo', params: { page: '1', code: '8989' } }) } } } </script>
<!-- test-vue-router-to页面 --> <template> <div> <!-- <span>{{page}}</span> <span v-show="code === '89'">{{code}}</span> <span>{{password}}</span> --> </div> </template> <script> export default{ data() { return { page: '', code: '', password: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { // debugger this.page = this.$route.params.page this.code = this.$route.params.code console.log('page', this.page) console.log('code', this.code) } } } </script>
这是由于query与params传参机制不一样,造成的差异,如果要隐藏参数用params,如果强制刷新不被清除用query
转:https://www.cnblogs.com/beka/p/8583924.html
vue-router路由如何实现传参的更多相关文章
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue 利用路由跨页传参
第一页,点击进入第二页进行传值: <template> <div id="app"> <div><router-link to=" ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- vue2.0路由写法、传参和嵌套
前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...
- vue router路由(三)
当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...
- vue——动态路由以及地址传参
动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个”共用”的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 1 ...
随机推荐
- msdn帮助,离线下载
这是我在msdn下载,如果要看msdn帮助,不是在线看就是visual studio 帮助那下载. 在网速不好的时候msdn看,会让人不爽. 帮助那个下载速度很慢,于是我就去下载离线. 因为微软看不到 ...
- 算法trick
数组从头到尾的循环遍历: index=(index+1)%length 索引值增加定长,对长度取余,则形成头尾循环.
- 图解Qt安装(Windows平台)
http://c.biancheng.net/view/3858.html 本节介绍 Qt 5.9.0 在 Windows 平台下的安装,请提前下载好 Qt 5.9.0.不知道如何下载 Qt 的读者请 ...
- 1--面试总结-js深入理解,对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This
参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p ...
- C#的Class的几个修饰符
none or internal 类只能在当前的工程中访问 Public 类可以在任何地方访问 abstract or internal abstract ...
- postman(二):详解在Pre-request Script中如何执行请求
一.这里以Pre-request Script标签来介绍 postman提供了postman提供了一个"Send a request"代码段,他是已经封装好的发送请求的方法 一个& ...
- Django【第14篇】:Django之Form组件补充
补充 一.定义的规则 class TeacherForm(Form): #必须继承Form # 创建字段,本质上是正则表达式 username = fields.CharField( required ...
- Day_02-Python的分支结构和循环结构
分支结构 应用场景 迄今为止,我们写的Python代码都是一条一条语句顺序执行,这种结构的代码我们称之为顺序结构.然而仅有顺序结构并不能解决所有的问题,比如我们设计一个游戏,游戏第一关的通关条件是玩家 ...
- 对SQL 优化,提升性能!
对SQL 进行优化能够有效提高SQL 语句的执行效率,降低系统资源开销,是开发者提高后端系统处理能力的首选方案. 新产品上线后,随着运营推广活动的开始,业务进入快速增长期,数据库作为后端系统唯一或者主 ...
- LUOGU P2569 [SCOI2010]股票交易(单调队列优化dp)
传送门 解题思路 不难想一个\(O(n^3)\)的\(dp\),设\(f_{i,j}\)表示第\(i\)天,手上有\(j\)股的最大收益,因为这个\(dp\)具有单调性,所以\(f_i\)可以贪心的直 ...