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
<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 >View current ranking</router-link >
where /a/b is the path of router routing
2. Button button
<el-button type="primary" icon="el-icon-search" @click="querySort" >View current ranking</el-button > querySort(){ this.$({ path: "/a/b" }); }
3. Link
<a :href="exportDistrict" rel="external nofollow" class="filter-item el-button el-button--success" >Export the game server</a > 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) => { 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.