首页 >> js开发 >> jsvue路由跳转传递参数的方式总结js大全
jsvue路由跳转传递参数的方式总结js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种:1)通过动态路由方式
//路由配置文件中 配置动态路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//跳转时页面
var id = 1;
this.$router.push('/detail/' + id)
//跳转后页面获取参数
this.$route.params.id
//路由配置文件中 配置动态路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//跳转时页面
var id = 1;
this.$router.push('/detail/' + id)
//跳转后页面获取参数
this.$route.params.id2)通过query属性传值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
path: '/detail',
query: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.query
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
path: '/detail',
query: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.query 3)通过params属性传值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
name: 'Detail',
params: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.params
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
name: 'Detail',
params: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.params 总结:1.动态路由和query属性传值 页面刷新参数不会丢失, params会丢失2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。补充方法:补充方法:页面刷新数据不会丢失
methods:{
insurance(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${id}`,
})
}
methods:{
insurance(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${id}`,
})
}需要对应路由配置如下:
this.$route.params.id
this.$route.params.id
//路由配置文件中 配置动态路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//跳转时页面
var id = 1;
this.$router.push('/detail/' + id)
//跳转后页面获取参数
this.$route.params.id
//路由配置文件中 配置动态路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//跳转时页面
var id = 1;
this.$router.push('/detail/' + id)
//跳转后页面获取参数
this.$route.params.id2)通过query属性传值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
path: '/detail',
query: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.query
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
path: '/detail',
query: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.query 3)通过params属性传值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
name: 'Detail',
params: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.params
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
name: 'Detail',
params: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.params 总结:1.动态路由和query属性传值 页面刷新参数不会丢失, params会丢失2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。补充方法:补充方法:页面刷新数据不会丢失
methods:{
insurance(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${id}`,
})
}
methods:{
insurance(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${id}`,
})
}需要对应路由配置如下:
this.$route.params.id
this.$route.params.id
相关文章:
- jsvue 页面回退mounted函数不执行的解决方案js大全
- jsvue+axios全局添加请求头和参数操作js大全
- jsvue data对象重新赋值无效(未更改)的解决方式js大全
- jsVUE项目axios请求头更改Content-Type操作js大全
- jsVue-CLI 3 scp2自动部署项目至服务器的方法js大全
- js使用React-Router实现前端路由鉴权的示例代码js大全
- JavaScriptthree.js欧拉角和四元数的使用方法
- js关于angular浏览器兼容性问题的解决方案js大全
- js谈一谈vue请求数据放在created好还是mounted里好js大全
- jsvue项目使用$router.go(-1)返回时刷新原来的界面操作js大全