vue中路由跳转的方式有哪些你知道吗

第vue中路由跳转的方式有哪些你知道吗router-link:to={name:home}

router-link:to={path:/home}//name,path都行,建议用name

//注意：router-link中链接如果是/开始就是从根路由开始，如果开始不带/，则从当前路由开始。

2.带参数

router-link:to={name:home,params:{id:1}}

//params传参数(类似post)

//路由配置path:/home/:id或者path:/home:id

//不配置path,第一次可请求,刷新页面id会消失

//配置path,刷新页面id会保留

//html取参$route.params.id

//script取参this.$route.params.id

router-link:to={name:home,query:{id:1}}

第二种方式：router.push(编程式路由)

//字符串

router.push(home)

//对象

router.push({path:home})

//命名的路由

router.push({name:user,params:{userId:123}})

//带查询参数，变成/registerplan=private

router.push({path:register,query:{plan:private}})

注意：如果提供了path，params会被忽略，上述例子中的query并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的name或手写完整的带有参数的path：

constuserId=123

router.push({name:user,params:{userId}})//-/user/123

router.push({path:`/user/${userId}`})//-/user/123

//这里的params不生效

router.push({path:/user,params:{userId}})//-/user

第三种方式：this.$router.push()(函数里面调用)

1.不带参数

this.$router.push(/home)

this.$router.push({name:home})

this.$router.push({path:/home})

2.query传参

this.$router.push({name:home,query:{id:1}})

this.$router.push({path:/home,query:{id:1}})

//html取参$route.query.id

//script取参this.$route.query.id

3.params传参

this.$router.push({name:home,params:{id:1}})//只能用name

//路由配置path:/home/:id或者path:/home:id,

//不配置path,第一次可请求,刷新页面id会消失

//配置path,刷新页面id会保留

//html取参$route.params.id

//script取参this.$route.params.id

4.query和params区别

query类似get,跳转之后页面url后面会拼接参数,类似id=1,非重要性的可以这样传,密码之类还是用params刷新页面id还在

params类似post,跳转之后页面url后面不会拼接参数,但是刷新页面id会消失

**注意：获取路由上面的参数，用的是$route，后面没有r**

第四种方式：this.$router.replace()(用法同上,push)

第五种方式：this.$router.go(n)

this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数

ps:区别

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面(就是直接替换了当前页面)

this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数

params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。

params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，

两者都可以传递参数，区别是什么？

query传参配置的是path，而params传参配置的是name，在params中配置path无效

query在路由配置不需要设置参数，而params必须设置

query传递的参数会显示在地址栏中

p