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 ...
随机推荐
- 关于session的记录
在做DRP项目中的修改密码功能时,在JSP中先获取了之前登陆时设置的session中的用户账号,在调试的时候一直只是刷新页面,而没有重启页面,导致AJAX一直传输到相应的servlet失败,出现404 ...
- rest_framework框架的分页
class MyPageNumberPagination(PageNumberPagination): page_size = 1 page_query_param = 'page' page_siz ...
- intel RDT技术管理cache和memory_bandwidth
主页:https://www.intel.com/content/www/us/en/architecture-and-technology/resource-director-technology. ...
- python面向对象--类的装饰器
# def deco(obj): # print("=====",obj) # obj.x=1 # return obj # @deco#===> test = deco(t ...
- [转]WAREZ无形帝国
一. 这会儿夜深了,他们昏昏睡去.随便哪栋建筑的某一个黑洞洞的窗口,你冷眼望去,没准就能看到一台白色的电脑,静静地卧在主人的书桌上.如果那主人睡得足够深,你就打开他的抽屉,现在你看到了什么?哦,我不是 ...
- Educational Codeforces Round 68 (Rated for Div. 2) D. 1-2-K Game (博弈, sg函数,规律)
D. 1-2-K Game time limit per test2 seconds memory limit per test256 megabytes inputstandard input ou ...
- so 调用
dlsym dlopen dlclose
- 关于sword框架浏览器上方小图标的修改
sword框架默认有一个document.ejs文件,可以导出html模板(找了很久没找到index.html,哈哈哈),里面有一行代码 这个href就是代表着浏览器上方图标的路径. 在public文 ...
- mybatis insert update delete返回都是整型 0,1,增,删,改要提交事物
mybatis insert update delete返回都是整型 0,1, 没有扔 增,删,改要提交事物
- mysql Alias操作符 语法
mysql Alias操作符 语法 作用:为列名称和表名称指定别名 大理石构件 语法:SELECT column_name(s) FROM table_name AS alias_name mysql ...