常见路由跳转的几种方式

常见的路由跳转有以下四种：

1.

/* 不带参数 */// 更建议用name// router-link链接中，带'/' 表示从根路径开始，不带 表示从当前路由开始/* 带参 */// 1. params传参// 路由配置 用 path: "/home/:id" 或者 path: "/home:id"// 配置path，刷新页面参数保留；不配置path，刷新页面后 参数会消失// html 取参 $router.params.id// script 取参 this.$router.params.id// 2 query传参// 路由可不配置// html 取参 $router.query.id// script 取参 this.$router.query.id

也可，如

2. this.$router.push() 跳转到指定的url，并在history中添加记录（即，点击回退，会退回上一个页面）。

/* 不传参 或 query传参 */this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})this.$router.push({name:'home', query: {id:'1'}})this.$router.push({path:'/home', query: {id:'1'}})/* params传参 */this.$router.push({name:'home', params: {id:'1'}})this.$router.push({path:'/home', params: {id:'1'}})//注： params传参只能用name//配置path，刷新页面参数保留；不配置path，刷新参数消失/* query和params的区别 */// query类似于 get 请求，跳转后页面url会拼接参数，如" />
 
3. this.$router.replace() 跳转到指定的url， 但不会在history记录（即，点击回退 退回到上上个页）
 
4. this.$router.go(n) 向前或向后跳转 n 个页面，n可正可负。
 
 
使用后三种 需要在中 导入
 
import router from '@/router';
参考：路由之间跳转的方式_路由跳转几种方式_时间管理maste的博客-CSDN博客
路由跳转几种方法_路由跳转的方式有哪几种_丶凡人的博客-CSDN博客