Vue this. $router. push of parameter to implement page jump operation

  • 2021-08-12 02:03:18
  • OfStack

In many cases, we will execute a series of methods before executing the click-button jump page, so we can use this. $router. push (location) to modify url to complete the jump.

push can be followed by an object or a string:


//  String 
this.$router.push('/home/first')
//  Object 
this.$router.push({ path: '/home/first' })
//  Named route 
this.$router.push({ name: 'home', params: { userId: wise }})

How to jump to a page and pass parameters:

1.Params

Because dynamic routing also passes params, path cannot be used with params1 in the this. $router. push () method, otherwise params will be invalid. You need name to specify the page.

And accessed through the name property of the routing configuration

Define parameters in the routing configuration file:


/* router.js  Documents */
import Vue from "vue";
import Router from "vue-router";
import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second"; // Information list 
 
Vue.use(Router);
export default new Router({
 routes: [ /*  Configure routing  */
  {
    name: "MediaSecond",
    path: "/MediaSecond",
    component: MediaSecond
  },
 ]
}) 
/*  It needs to be connected in the back 1 Blank line, otherwise it cannot pass  ESlint  Syntax validation  */

Get the page through name and pass params:

this.$router.push({ name: 'MediaSecond',params:{artistName:artistName,imgUrl:imgUrl,type:2} })

Obtain the parameters from the target page via this. $route. params:


if (this.$route.params.type == 2) {
  this.type = apis.getAtistDetails;
} else {
  this.type = apis.getMessageList;
}

2.Query

The page passes parameters through path/name and query, where row is a row of table data

this.$router.push({ name: 'DetailManagement', query: { auditID: row.id, type: '2' } });

this.$router.push({ path: '/DetailManagement', query: { auditID: row.id, type: '2' } });

Obtain the parameters on the destination page via this. $route. query:

this.$route.query.type

Additional knowledge: vue this. $router. push ('./map'); Unable to jump problem


<template>
 <div style="text-align: center">
  <el-button type="primary" style="margin-top: 40vh" @click="onLogin"> Login </el-button>
 </div>
</template>
<script>
 export default {
  name: 'login',
  data () 
   return {
   }
  },
  methods: {
   onLogin:function () {
    this.$router.push('./map');
   }
  },
 }
</script>
<style scoped>
  
</style>

This is introduced in router

import map from '@components/map'

Clicking on the event cannot jump

2. Solution:

Change the introduction mode

import map=r= > require.ensure([],()= > (require('../components/map')),'map')

In this way, there is no problem through static introduction!


Related articles: