How to make a jump page in vue.js

Vue.js method to implement jump page: 1. Use tag [] to jump; 2. Use [this.$router.push()] method, when there is only one parameter, Represents the jump address, and can also add a parameter to pass the value.

[Related article recommendations: vue.js]

##vue. How to implement page jump in js:

Click the bottom bookshelf to jump to the corresponding page

<router-link :to="{name: &#39;bookshelf&#39;, params: { entityId: this.entityId } }"
             :class="{&#39;flex-item-1&#39;:&#39;flex-item-1&#39;,cur:tabs[0].isShow}" href="javascript:">
              <span class="tabNav-ico tabNav-book"></span>
              <span class="tabNav-txt">书 架</span>
</router-link>

'name': 'bookshelf' indicates the name of the Vue component to be jumped, name It is set in index.vue under the router file.

{
     path: '/bookshelf',
     name: 'bookshelf',
     component: Bookshelf
   },

params: {entityId: this.entityId} contains the parameters to be passed.

Receive parameters in bookshelf component

this.bookshelfId = this.$route.params.entityId;

In addition to using the label

<a @click="toIndex" :class="{&#39;flex-item-1&#39;:&#39;flex-item-1&#39;,cur:tabs[2].isShow}" href="javascript:">
      <span class="tabNav-ico tabNav-home"></span>
      <span class="tabNav-txt">首 页</span>
</a>
toIndex: function(){
        this.$router.push("/?entityId="+ localStorage.getItem("entityId"));
}

You can also jump to the page. When the this.$router.push() method has only one parameter, it represents the jump address. You can also add a parameter to pass value.

Writing:

this.$router.push({name: "deepReadingDetail", params: {'id': data.id, 'title': data.title}});

Receive parameters:

this.$route.params.title

##Related free learning Recommended:

javascript

(Video)

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