vue的跳转方式——window.open & router-link标签 & this.$router.push跳转 & this.$router.replace跳转 & this.$route
vue的跳转方式——window.open & router-link标签 & this.KaTeX parse error: Expected 'EOF', got '&' at position 15: router.push跳转 &̲this.router.replace跳转 &this.$route1、普通跳转(跳转的是路由)const {href}
·
vue的跳转方式——window.open & router-link标签 & this.KaTeX parse error: Expected 'EOF', got '&' at position 15: router.push跳转 &̲ this.router.replace跳转 & this.$route
1、普通跳转(跳转的是路由)
const {href} = this.$router.resolve({
name: "newDate",//这里是跳转页面的name
query:{//要传的参数
floor_id:this.floor_id
}
});
window.open(href, '_blank');//打开新的窗口
2、跳转新的网页
window.open("https://www.baidu.com/","_blank")
如果要引用公共属性中的url,就再你想用的那个vue页面中important
那个url所在的页面然后去引用
3、a标签
此处链接为一个外链接 传统得 ajax get请求 携带字符串 item.goods_id 商品id
<a :href="$global.http+ '/b2b/addCart?gid='+ item.goods_id"></a>
标签的 target 属性:
_blank——浏览器总在一个新打开、未命名的窗口中载入目标文档
4、router-link标签
标签在网页中检查就相当于标签 此处链接为vue项目内部的链接 to属性值相当于 路由 此标签生成的网址在路由前面 会有个 #
<router-link :to="{path:'/login'}" ></router-link>
5、新页面替换新页面
通过事件点击打开新的页面
//方法
See (goodsId) {
if(this.$global.getCookie('SYB_TX[tokenId]')){
window.location.href ='https://www.baidu.com/?tn='+goodsId; // 跳转链接-替换原有页面
}else{
this.$router.push({path: '/login'})
}
},
汇总
1、router-link跳转
// 直接写上跳转的地址
<router-link to="/detail/one">
<span class="spanfour" >link跳转</span>
</router-link>
// 添加参数
<router-link :to="{path:'/detail/two', query:{id:1,name:'vue'}}">
</router-link>
// 参数获取
id = this.$route.query.id
// 新窗口打开
<router-link :to="{path:'/detail/three', query:{id:1,name:'vue'}}" target="_blank">
</router-link>
2、this.$router.push跳转
toDeail (e) {
this.$router.push({path: "/detail", query: {id: e}})
}
// 参数获取
id = this.$route.query.id
toDeail (e) {
this.$router.push({name: "/detail", params: {id: e}})
}
// 注意地址需写在 name后面
//参数获取,params和query区别,query参数在地址栏显示,params的参数不在地址栏显示
id = this.$route.params.id
3、this.$router.replace跳转
//和push的区别,push有记录一个history,replace没有
toDeail (e) {
this.$router.replace({name: '/detail', params: {id: e}})
}
4、resolve跳转
resolve页面跳转可用新页面打开
Vue Router2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。
const {href} = this.$router.resolve({
name: 'foo',
query: {
bar
}
})
window.open(href, '_blank')
或
版本不支持,可以把query改成parmas
toDeail (e) {
const new = this.$router.resolve({name: '/detail', params: {id: e}})
window.open(new.href,'_blank')
}
注:
vue-router一般在单页面里用的多,要新开页面直接用window.open(大部分浏览器会拦截)
更多推荐
已为社区贡献72条内容
所有评论(0)