首页 >> js开发 >> jsVue页面跳转传递参数及接收方式js大全
jsVue页面跳转传递参数及接收方式js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式。典型应用场景:列表页跳转到详情页一、配置路由一、配置路由文件路径:src/router/config.php
import Vue from 'vue'
import Router from 'vue-router'
import classify from '.././components/classify/classify.vue'
import classifyChild from '.././components/classify/classifyChild.vue'
export default new Router({
mode: 'history',
routes: [
{
path: '/classify',
name: ' classify',
component: classify
},
{
path: '/classify/classifyChild',
name: 'classifyChild',
component: classifyChild
},
]
})
import Vue from 'vue'
import Router from 'vue-router'
import classify from '.././components/classify/classify.vue'
import classifyChild from '.././components/classify/classifyChild.vue'
export default new Router({
mode: 'history',
routes: [
{
path: '/classify',
name: ' classify',
component: classify
},
{
path: '/classify/classifyChild',
name: 'classifyChild',
component: classifyChild
},
]
})二、页面跳转及传参二、页面跳转及传参
//方式一
//方式二
//方式一
//方式二
三、参数接收三、参数接收
//对应于方式一
let id=this.$route.params.id;
//对应于方式二
let id=this.$route.query.id;
//对应于方式一
let id=this.$route.params.id;
//对应于方式二
let id=this.$route.query.id;补充知识:关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题补充知识:补充知识:关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题首先在store中定义所需要的变量可以进行初始化,再定义一个方法,登录成功后A页面,跳转到B页面之前,需要直接调用store中存储数据的方法,全局可以使用,顺序是,先调用store中的数据,其次调用sessionStorage和localStorage中的数据。这样的话,可以避免A页面跳转B页面时候,手动刷新才显示信息。直接登录成功后,直接调用store的方法,把值存储进去,B页面可以直接显示用户信息。必须在store定义方法,登录成功后调用方法进行回显用户信息。在这里插入图片描述如此一来,就可以避免必须手动刷新一下才会显示信息。以上这篇Vue页面跳转传递参数及接收方式就是小编分享给大家的全部内容了,希望能给大家一个参考。
import Vue from 'vue'
import Router from 'vue-router'
import classify from '.././components/classify/classify.vue'
import classifyChild from '.././components/classify/classifyChild.vue'
export default new Router({
mode: 'history',
routes: [
{
path: '/classify',
name: ' classify',
component: classify
},
{
path: '/classify/classifyChild',
name: 'classifyChild',
component: classifyChild
},
]
})
import Vue from 'vue'
import Router from 'vue-router'
import classify from '.././components/classify/classify.vue'
import classifyChild from '.././components/classify/classifyChild.vue'
export default new Router({
mode: 'history',
routes: [
{
path: '/classify',
name: ' classify',
component: classify
},
{
path: '/classify/classifyChild',
name: 'classifyChild',
component: classifyChild
},
]
})二、页面跳转及传参二、页面跳转及传参
//方式一
//方式二
//方式一
//方式二
//对应于方式一
let id=this.$route.params.id;
//对应于方式二
let id=this.$route.query.id;
//对应于方式一
let id=this.$route.params.id;
//对应于方式二
let id=this.$route.query.id;补充知识:关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题补充知识:补充知识:关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题首先在store中定义所需要的变量可以进行初始化,再定义一个方法,登录成功后A页面,跳转到B页面之前,需要直接调用store中存储数据的方法,全局可以使用,顺序是,先调用store中的数据,其次调用sessionStorage和localStorage中的数据。这样的话,可以避免A页面跳转B页面时候,手动刷新才显示信息。直接登录成功后,直接调用store的方法,把值存储进去,B页面可以直接显示用户信息。必须在store定义方法,登录成功后调用方法进行回显用户信息。在这里插入图片描述如此一来,就可以避免必须手动刷新一下才会显示信息。以上这篇Vue页面跳转传递参数及接收方式就是小编分享给大家的全部内容了,希望能给大家一个参考。
相关文章:
- js详解Java中String JSONObject JSONArray List<实体类>转换js大全
- jsJS sort排序详细使用方法示例解析js大全
- jsJS前端基于canvas给图片添加水印js大全
- jsVUE前端从后台请求过来的数据进行转换数据结构操作js大全
- js让Vue响应Map或Set的变化操作js大全
- js详解vue 组件的实现原理js大全
- jsVue向后台传数组数据,springboot接收vue传的数组数据实例js大全
- JavaScriptFlexible.js可伸缩布局实现方法详解
- jses5 类与es6中class的区别小结js大全
- jsPHP 502bad gateway原因及解决方案js大全