Vue router 路由跳转

69 阅读1分钟

##大家好,我是小逗号,今天给大家来一期关于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

喜欢的话点个赞多支持一下,还有更多的前端帖子哦。