在原生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('/')