路由跳转方式有哪些?
在Vue中,路由跳转主要有以下几种方式:
- 使用router-link组件:
<router-link to="/home">Home</router-link>
- 使用编程式导航
// 字符串
this.$router.push('home')// 对象
this.$router.push({ path: 'home' })// 带查询参数,变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
- 使用router.replace(无历史记录):
this.$router.replace({ path: 'home' })
- 使用router.go(前进或后退记录):
// 前进一步
this.$router.go(1)// 后退一步
this.$router.go(-1)
- 在导航守卫中进行跳转:
router.beforeEach((to, from, next) => {if (需要跳转) {next('/about')} else {next() // 继续当前导航}
})
路由传参的方式有哪些?
路由传参有以下维度要选择
1.传递信息类型
参数类型一般有两种字符串或者对象
2.载体
路由传递参数的载体只有两个query和params。
3. 编写方式
编写方式有两种:
- 使用声明式导航 router-link组件
- 使用编程式导航
4.跳转目标
- path
- name
以上有四个维度,每个维度又有各种选择,所以组合起来 有16种路由传递参数的方式。但是有一些情况不能使用。
枚举出所有的情况
使用载体params 和 传递参数类型是对象
1.(无法使用!!!)使用方式router-link,目标使用path
<router-link :to="{ path: '/home', params: { id: 1 } }" />
// 如果载体是params,传递数据是对象,只能使用name配置项,不能使用path配置项
2.使用方式router-link,目标使用name
<router-link :to="{ name: 'home', params: { id: 1 } }" />
3.(无法使用!!!)使用方式使用编程式导航,目标使用path,
this.$router.push({ path: '/home', params: { id: '1' } })
// 如果载体是params,传递数据是对象,只能使用name配置项,不能使用path配置项
4.使用方式使用编程式导航,目标使用name
this.$router.push({ name: 'home', params: { id: '1' } })
使用载体query 和 传递参数类型是对象
5.使用方式router-link,目标使用path
<router-link :to="{ path: '/home', query: { id: 1 } }" />
6.使用方式router-link,目标使用name
<router-link :to="{ name: 'home', query: { id: 1 } }" />
7.使用方式使用编程式导航,目标使用path,
this.$router.push({ path: '/home', query: { id: '1' } })
8.使用方式使用编程式导航,目标使用name
this.$router.push({ name: 'home', query: { id: '1' } })
使用载体params 和 传递参数类型是字符串
9.使用方式router-link,目标使用path
//路由参数配置
const router = new VueRouter({routes: [{path: '/about/:id',component: User}]
})
//声明式导航使用
// params 不能与 path 一起使用// 错误的写法
<router-link to="{path : '/about', params: { id: 1 } }">跳转</router-link>
// 正确的写法
<router-link to="{path : '/about/1' }">跳转</router-link>
10.使用方式router-link,目标使用name
//路由参数配置
const router = new VueRouter({routes: [{path: '/about/:id',component: User}]
})
//声明式导航使用
<router-link to="{name : 'about', params: { id: 1 } }">跳转</router-link>
11.使用方式使用编程式导航,目标使用path
//路由参数配置
const router = new VueRouter({routes: [{path: '/about/:id',component: User}]
})
this.$router.push({ path: 'about/1', })
12.使用方式使用编程式导航,目标使用name
//路由参数配置
const router = new VueRouter({routes: [{path: '/about/:id',component: User}]
})
this.$router.push({ name: 'about', params: { id: '001' } })
使用载体query 和 传递参数类型是字符串
13.使用方式router-link,目标使用path
<router-link to="/home/detail?id=1"><router-link :to="{ path: '/home', query: { id: 1 } }" />
14.使用方式router-link,目标使用name
<router-link :to="{ name: 'home', query: { id: 1 } }" />
15.使用方式使用编程式导航,目标使用path,
this.$router.push({ path: '/home?id=1'})
this.$router.push({ path: '/home', query: { id: '1' } })
16.使用方式使用编程式导航,目标使用name
this.$router.push({ name: 'home', query: { id: '1' } })
哪些情况下路由传递的参数刷新页面会丢失?
1.使用了params的载体的情况
2.使用了query载体的情况
如果传的是字符串,刷新页面后数据是不会丢失的,但是的是对象或者是数组,那么刷新后,页面的数据就会丢失。