]; 2. Jump through [this.$router.push] change."/> ]; 2. Jump through [this.$router.push] change.">

Home >Web Front-end >Vue.js >How to open a new page in vue.js

How to open a new page in vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-11-12 10:46:197580browse

How to open a new page in vue.js: 1. [router-link] jump, the code is [9f887cd4073602f56ec66f6af544362e]; 2 , jump through [this.$router.push].

How to open a new page in vue.js

【Recommended related articles: vue.js

##vue. How to open a new page in js:

1.router-link jump

   // 直接写上跳转的地址
  <router-link to="/detail/one">
    <span class="spanfour" >link跳转</span>
  </router-link>
  // 添加参数
  <router-link :to="{path:&#39;/detail/two&#39;, query:{id:1,name:&#39;vue&#39;}}">
   </router-link>
  // 参数获取
  id = this.$route.query.id
  // 新窗口打开
  <router-link :to="{path:&#39;/detail/three&#39;, query:{id:1,name:&#39;vue&#39;}}" target="_blank">
  </router-link>
```javascript

2.this.$router.push jump

```javascript
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 jump

//和push的区别,push有记录一个history,replace没有
 toDeail (e) {
   this.$router.replace({name: &#39;/detail&#39;, params: {id: e}})
 }

4. resolve jump

  resolve页面跳转可用新页面打开
 2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了(这边应用:https://segmentfault.com/q/1010000009557100下的一个回答)
 toDeail (e) {
   const new = this.$router.resolve({name: &#39;/detail&#39;, params: {id: e}})
   window.open(new.href,&#39;_blank&#39;)
 }

Related free learning recommendations:

JavaScript (video)

The above is the detailed content of How to open a new page in vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn