SoFunction
Updated on 2025-04-04

How to jump to a new page via router-link or button

Jump to a new page via router-link or button

a. The product list page is as follows (click 'jump to shopping cart page' and it will jump to a new page instead of loading a component on the same page)

<template>
  <div>
    This is the product list page
    <router-link to='/goods/title'>Show product title</router-link>
    <router-link to='/goods/image'>Show product pictures</router-link>
    // Jump to the shopping cart page    <router-link to='/cart'>Jump to the shopping cart page</router-link>
     <button @click="jump">Button-Jump to the shopping cart page</button>
    <div>
        <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      msg: ''
    }
  },
  methods: {
    jump(){
    //this.$("/cart")
    //The passed parameters are obtained using {{ $}}    this.$({path: '/cart?goodsId=12'})
    //this.$(-2)
    //Two steps back    }
  }
}
</script>
 
<style>
</style>

b. You also need to modify the routing file src/router/ through the <router-link> method. You don’t need to read other methods.

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
// 2. Import the Cart componentimport Cart from '@/views/Cart'
 
(Router)
 
export default new Router({
  mode: 'history',
  routes: [
    {
          path: '/goods',
          name: 'GoodsList',
          component: GoodsList,
          children: [
              {
                    path: 'title',
                  name: 'title',
                  component:Title    
              },
 
              {
                    path: 'image',
                  name: 'image',
                  component:Image    
              }
          ]
    },
    // 1. Write to the shopping cart component    {
        path: '/cart',
          component: Cart,
    }
  ]
})

Vue multiple ways to jump to a new page

Methods for linking via router-link or button or a

1. router-link routing

&lt;router-link :to="{ path: '/a/b' }"
       // tag="button"  //As a button, you have to write the style yourself. It is inconvenient, please choose the second method          &gt;View current ranking&lt;/router-link
        &gt; 

where /a/b is the path of router routing

2. Button button

&lt;el-button type="primary" icon="el-icon-search" @click="querySort"
          &gt;View current ranking&lt;/el-button
        &gt;
querySort(){
this.$({ path: "/a/b" });
}

3. Link

&lt;a :href="exportDistrict" rel="external nofollow"  class="filter-item el-button el-button--success"
          &gt;Export the game server&lt;/a
        &gt;
     data() { return{   exportDistrict: "/a/b",}}

Which method to choose to decide for yourself;

Also: If you jump a page in the method, such as an error page, the use method is as follows:

if ( === 1002) {
        //Unauthentic processing        loadPage("/error");
        return;
      }
      
// Jump, redirectconst loadPage = (url, reject) =&gt; {
  if (reject) {
    return reject(url);
  }
  window.$$vm.$(url);
};

middle:

window.$$vm = new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

The above is personal experience. I hope you can give you a reference and I hope you can support me more.