1.this.$router.push()
描述:跳转到不同的url,但这个方法回向history栈添加一个记录,点击后退会返回到上一个页面。
2.this.$router.replace()
描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
3.this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
4.router-link
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
query传参
- query可以通过name或path来引入路由
var router = new VueRouter({
routes: [
{ name:'register',path: '/register', component: register }
]
})
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link>
<router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>
this.$router.push('/login?id=10&name=zs')
this.$router.push({path:'/register',query:{id:5,name:'lili'}})
this.$router.push({name:'register',query:{id:5,name:'lili'}})
params传参
- params只能通过name来引入路由,path会undefined
<router-link to="/login/12/ls">登录</router-link>
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
this.$router.push('/login/12/ls')
this.$router.push({name:'register',params:{id:10,name:'lili'}})
- 路由中定义的name不能重复,否则路由会被覆盖,上个路由将会是404