Vue - 详解路由跳转及路由传参问题
在Vue中路由跳转有四种方式
-
router-link
-
this.$router.push() (函数里面调用)
-
this.$router.replace() (用法同push)
-
this.$router.go(n)
一. 不带参路由跳转
1. router-link
路由配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由跳转
跳转
跳转
2. this.$router.push()
路由配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由跳转
this.$router.push('/index')
this.$router.push({name:'index'})
this.$router.push({path:'/index'})
3. this.$router.replace()
用法和this.$router.push()一样，push效果是进行跳转，replace可以理解为非跳转，而是替换当前路由地址
路由配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由跳转
this.$router.replace('/index')
this.$router.replace({name:'index'})
this.$router.replace({path:'/index'})
4. this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
n为正整，则向前跳转
n为负数，则向后跳转
二. 带参路由跳转
1. router-link
1.1. params传参
不配置路由path参数 ，第一次可请求获取参数，刷新页面，所传参数会消失
路由参数配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由传值跳转
跳转
配置路由path参数，刷新页面，所传参数会保留
路由参数配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由传值跳转
跳转
取参数
两种方法可取：
html 页面直接使用：$route.params.id
script 取参：this.$route.params.id
Index页面
html 取参:{{$route.params.id}}
script 取参{{linkOne}}
1.2. query传参
路由path参数可以不配置，刷新页面，所传参数不会消失
路由参数配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由传值跳转
跳转
取参数
两种方法可取：
html 页面直接使用：$route.query.id
script 取参：this.$route.query.id
Index页面
html 取参:{{$route.query.id}}
script 取参{{linkOne}}
2. this.$router.push()
2.1. params传参
不配置路由path参数 ，第一次可请求获取参数，刷新页面，所传参数会消失
路由参数配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由传值跳转
this.$router.push({name:'index',params: {id:'1'}})
配置路由path参数，刷新页面，所传参数会保留
路由参数配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由传值跳转
this.$router.push({name:'index',params: {id:'1'}})
取参数
两种方法可取：
html 页面直接使用：$route.params.id
script 取参：this.$route.params.id
Index页面
html 取参:{{$route.params.id}}
script 取参{{routerData}}
2.2. query传参
路由path参数可以不配置，刷新页面，所传参数不会消失
路由参数配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由传值跳转
this.$router.push({name:'index',query: {id:'1'}})
取参数
两种方法可取：
html 页面直接使用：$route.query.id
script 取参：this.$route.query.id
Index页面
html 取参:{{$route.query.id}}
script 取参{{routerData}}
3. this.$router.replace()
用法和this.$router.push()一样，push效果是进行跳转，replace可以理解为非跳转，而是替换当前路由地址
3.1. params传参
不配置路由path参数 ，第一次可请求获取参数，刷新页面，所传参数会消失
路由参数配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由传值跳转
this.$router.replace({name:'index',params: {id:'1'}})
配置路由path参数，刷新页面，所传参数会保留
路由参数配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由传值跳转
this.$router.replace({name:'index',params: {id:'1'}})
取参数
两种方法可取：
html 页面直接使用：$route.params.id
script 取参：this.$route.params.id
Index页面
html 取参:{{$route.params.id}}
script 取参{{routerData}}
3.2. query传参
路由path参数可以不配置，刷新页面，所传参数不会消失
路由参数配置
{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
路由传值跳转
this.$router.replace({name:'index',query: {id:'1'}})
取参数
两种方法可取：
html 页面直接使用：$route.query.id
script 取参：this.$route.query.id
Index页面
html 取参:{{$route.query.id}}
script 取参{{routerData}}