vue 路由跳转、传参、新窗口打开页面

跳转方式

1、this.$router.push 当前页面跳转，新增history记录，点击后退，返回上一级页面

①参数直接拼接在后面：

this.$router.push('/nextPage?name=name&id=111')  // 当前页面跳转

接收参数：

this.$route.query // 全部参数

②路径写在name里面，params传参，这种方式前面不需要加‘/’

this.$router.push({ name: 'highcharts', params: { name: 111, id: 222 } })

使用：this.$route.params 接收参数

③ query传参 this.$route.query 接收参数

 this.$router.push({ path: "/highcharts", query: { username: "jack" } });

2、this.$router.replace('url?name=') // 替换history的最后一个页面，点击后退回到上上个页面，其他与this.$router.push基本一样

3、this.$router.go( );  

this.$router.go( -1 );  // 后退一步记录，等同于 history.back()
this.$router.go(1);  // 在浏览器记录中前进一步，等同于 history.forward()

新窗口打开页面

 let { href } = this.$router.resolve({
        path: "/highcharts",
        query: { username: "jack" }
      })
      window.open(href, '_blank')