路由跳转的方法:
1.内置<router-link></router-link>组件,它被渲染为<a>标签:
不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
携带参数:
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
取参:
html取参:$route.params.id
script取参:this.$route.params.id
query同理
2、router.push编程式路由:
//字符串
this.$router.push(''/users'')
//对象
this.$router.push({path:'home})
//params传参方式
this.$router.push({name:'user',parmas:{id:'123})
//query传参方式
this.$router.push({path:‘register’,query:{id:‘123’})
3、this.$router.replace()(用法同push)
4、this.$router.go(n)(向前或者向后跳转n个页面)
5、window.open(path)
打开新的窗口/在当前窗口打开链接
与this.$router.push区别
if(path.indexOf('http') != -1){
return window.open( path , '_blank')
}
this.$router.push({
path: path,
title: title
})
this.$router.push:会携带当前页面的路由进行跳转
而window.open 直接打开新的路径地址