vue路由跳转传参
跳转时url不显示参数
router.js(配置name)
{
// 路由配置 path: 'indicatorTable/:farmCascader', 或者 path: 'indicatorTable:farmCascader',
// 不配置path ,第一次可请求,刷新页面farmCascader会消失
// 配置path,刷新页面farmCascader会保留
// 配置path后,url上会携带参数farmCascader!!!!!
path: 'indicatorTable',
name:'indicatorTable', //配置name
component: () => import('@/views/report/indicatorTable'),
hidden :true,
meta: {
title: '指标电量表格',
icon: 'initReport'
}
}
需要跳转的vue
this.$router.push({
name:'indicatorTable',
params: {
farmCascader:JSON.stringify(farmCascader)
}
})
接收的vue
created() {
this.farmCascader = JSON.parse(this.$route.params.farmCascader)
}
跳转时url显示参数
router.js(配置name或path)
{
//path不能配置路径后参数,否则路由错误
path: 'indicatorTable',
name:'indicatorTable', //配置name
component: () => import('@/views/report/indicatorTable'),
hidden :true,
meta: {
title: '指标电量表格',
icon: 'initReport'
}
}
需要跳转的vue
this.$router.push({name:'indicatorTable',query: {id:'1'}})
this.$router.push({path:'/indicatorTable',query: {id:'1'}})
接收vue
this.$route.query.id
路由跳转方法区别
- this.$router.push
跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
- this.$router.replace
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
- this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数