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.$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（大部分浏览器会拦截）