Vue路由跳转和路由传参

在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。

比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。

而常见的写法就是：

location.href（"index.html"）；
或
window.open("index.html")

那么vue是基于路由的，那么怎么进行页面的跳转？

路由跳转

大家都知道vue的每个页面级组件需要配置路由才可以使用，那么跳转页面也就是控制路由的切换。

例如：点击登录按钮，跳转到登录页面

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

* ：注意this指向

这里通过路由router的push方法，用来切换当前路由，path指向要跳转的页面路径。

但是往往我们不只是需要切换页面，还需要附加一些状态、参数等供下一个页面使用。

比如：登录后我需要把用户名传到要跳转的首页，以显示出来;

比如：点击商品列表的某个商品我需要把当前点击的是哪件商品（下标/id...）传到商品详情页面，然后显示对应商品的商品详情。

案例测试：点击登录，跳转到首页，并把用户名传到首页

路由传参

路由传参方式一 ：

this.$router.push({
    "path":"/index"，
    "query":{
        "username":this.username
    }
})

通过path指向要跳转的页面，query是要传递的参数（path是配置路由时写的路径）

this.$route.query.username;

首页接收传递过来的用户名。

注：跳转传参的一方是 router ，接收参数的一方是 route ，不要写错了

路由传参方式二 ：

this.$router.push({
    "name":"index"，
    "params":{
        "username":this.username
    }
})

通过name指向要跳转的页面，params是要传递的参数（name是配置路由时写的名字）

this.route.params.username

首页接收传递过来的用户名。

路由传参方式三：

<router-link :to="{path:'/index',query:{username:username}}"></router-link>

获取：

this.$route.query.username

以上就是一些常见的路由传参的方式。

注意：

push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

路由实例方法go 

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

路由实例方法replace

//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，不会向 history 栈添加一个新的记录
<router-link to="/05" replace>05</router-link>
// 一般使用replace来做404页面
this.$router.replace('/')