Vue this.$(parameter) implements page jump operation

In many cases, we will execute a series of methods before clicking the button to jump to the page. At this time, we can use this.$(location) to modify the url to complete the jump.

push can be followed by an object or a string:

// Stringthis.$('/home/first')
// Objectthis.$({ path: '/home/first' })
// Named routesthis.$({ name: 'home', params: { userId: wise }})

How to jump to the page and pass parameters:

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

and access through the name attribute configured by the route

Define parameters in the routing configuration file:

/*  document*/
import Vue from "vue";
import Router from "vue-router";
import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second"; //Information list 
(Router);
export default new Router({
 routes: [ /* Configure routing */
  {
    name: "MediaSecond",
    path: "/MediaSecond",
    component: MediaSecond
  },
 ]
}) 
/* You need to follow a blank line later, otherwise it will not be verified by ESlint syntax */

Get the page through name and pass params:

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

Get parameters via this.$ on the target page:

if (this.$ == 2) {
   = ;
} else {
   = ;
}

The page passes parameters through path/name and query. In this instance, row is a row of table data.

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

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

Get parameters via this.$ on the target page:

this.$

Supplementary knowledge:vue this.$('./map'); Issue of not being able to jump

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

This is how it was introduced in router

import map from '@components/map'

Click event cannot be redirected

2. Solution:

Change the introduction method

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

This way, there is no problem through static introduction!

The above article Vue this.$(parameter) page jump operation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.