##大家好,我是小逗号,今天给大家来一期关于Vue的路由跳转。
在我们现在使用的单页面SPA,说白了就是一个HTML,全部依靠我们的路由来进行跳转。今天我们就来了解一下Vue的路由跳转。
首先我们的vue有五由的跳转的方式。
一. ruter-link
A. 不带参数
<router-link to="/about">About</router-link>
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
name 与 path 都是可以的
B.带参数
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
二. router.push
A. 不带参数
router.push('home')
outer.push({ path: 'home' })
router.push({ name: 'user')
B. 带参数
router.push({ name: 'user', params: { userId: '123' }})
router.push({ path: 'register', query: { plan: 'private' }})
三. this.$router.push()
A. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
B. 带参数
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
this.$router.push({name:'home',params: {id:'1'}}) // 只可以
四. this.$router.replace()
同push
区别在于
push跳转url,history会在栈当中添加一个记录,当点击返回回上一页
会返回上一页。replace不会在栈当中记录,所以当点击上一页的时候就会返回上上一个。
五. this.$router.go(n) ()
在这里的n正数的话向前n个页面,
负数的话就向后n个页面。
当我们需要获取跳转转惨的时候就是
params传参 this.$route.params.id
query传参 this.$route.query.id
喜欢的话点个赞多支持一下,还有更多的前端帖子哦。