VUE路由的跳转的4中方式

vue 路由跳转四种方式（带参数）

1. router-link （带参数、不带参数）
2. this.$router.push() (函数里面调用，1.2.3)
3. this.$router.replce() (用法同上，push)
4. this.$router.go(n)

一.
1.router-link (不带参数)

<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}}">
//query传参数  （类似get，url后面会显示参数）
//路由可不配置

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

二、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({name:'/home'，query：{id：'1'}})
//html 取参  this.$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 会消失

三.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可为正整数或负整数

但是本着点赞自愿，收藏吃灰，还是多少可以支持一下。