vue项目中跳转到新页面的方式

跳转到站外

window.location.href

初见

window.location.href 是一个用于获取当前页面 URL 或让浏览器跳转到新 URL 的重要方法，是 window.location 对象的属性。它返回一个字符串，表示当前页面的 URL；同时，当通过将 URL 指定给 window.location.href 时，可以让浏览器跳转到新的 URL。

常见用法

• self.location.href="/url" 当前页面打开URL页面
• location.href="/url ：当前页面打开URL页面
• window.location.href="/url" ：当前页面打开URL页面，前面三个用法相同
• this.location.href="/url" ：当前页面打开URL页面
• parent.location.href="/url" ：在父页面打开新页面
• top.location.href="/url" ：在顶层页面打开新页面
• 如果页面中自定义了 frame，那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址
• window.location.href=window.location.href 和 window.location.Reload() ： 刷新当前页面。

区别在于是否有提交数据。
当有提交数据时，window.location.Reload()会提示是否提交，window.location.href=window.location.href;则是向指定的url提交数据

实例1：

跳转外部链接并覆盖当前页

<el-button type="primary" @click="jump">跳转</el-button>
    jump () {
      window.location.href = 'https:\\www.baidu.com'
    }

window.open

跳转外部链接不覆盖当前页面，在新窗口打开

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法：

window.open(URL,name,specs,replace)

参数：

参数	说明
URL	可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
name	可选。指定target属性或窗口的名称。支持以下值：_blank - URL加载到一个新的窗口。这是默认； _parent - URL加载到父框架； _self - URL替换当前页面； _top - URL替换任何可加载的框架集； name - 窗口名称
specs	可选。一个逗号分隔的项目列表（更加详细的参数请见：菜鸟教程：window对象）
replace	Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

实例1：

在浏览器新窗口中打开 www.runoob.com

function open_win() {
    window.open("https://www.runoob.com");
}

实例2：

在一个新的浏览器打开一个 window 空白页：

function openWin(){
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("
这是'我的窗口'
");
    myWindow.focus();
}

实例3：

点击按钮跳转到一个指定页面

<el-button type="primary" @click="jump">跳转</el-button>
    jump () {
      window.open('https:\\www.baidu.com','_blank')
    }

实例4：

点击按钮后，先通过接口获取到要跳转的URL地址，然后再进行跳转，该跳转是从一个系统的A端跳转到B端

<el-table-column label="操作" align="center" width="100px">
        <template slot-scope="scope">
          <el-button @click="GoBD(scope.row)" type="primary" size="small"
            >去往B端el-button
          >
        template>
el-table-column>

js代码

    // 去往b端,先通过公司编号获取到res，拿到url
    async GoBD(row) {
      let data = {
        company_no: row.company.company_no,
      };
      const res = await GoBD(data);
      window.open(res.data.jump_url);
    },

站内跳转

this.$router.push

导航到不同的位置

页面中内部跳转，用this.$router.push()实现；在站内想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

this.router.replace

替换当前位置

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true ：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

this.router.go

横跨历史

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)