I. Adding Dynamic Parameter Definition to Routing Definition

1. Routing Definition Item, using: xx to define dynamic parameters

    {
      path:'/user/:id/:name',
      name:'user',
      component:()=>import('./views/User.vue')
    }

2. Get dynamic parameters, global variable $route

Use:

<template>
    <el-alert type='success' title="Tips">
        <el-button type='warn'>{{$route.params.id}}</el-button>
        {{$route.params.name}}

       <el-button type='primary' @click="backIndex()">Back to home page</el-button>

       <router-link to='/'>Back to home page</router-link>
    </el-alert>
</template>

Use in js:

  methods: {
    backIndex() {
      //Printing parameters
      console.info(this.$route);
    }
  }

II. Routing Link Use

1. Define jump links using router-link

   <router-link to="/">
    <el-button>Skip home page</el-button>
   </router-link>
 <router-link to="/about">
    <el-button>Jump about us</el-button>
   </router-link>
    <router-link to="/user/10/Zhang San">
    <el-button>Jump membership 10</el-button>
   </router-link>

2. Jump with js

  methods: {
    backIndex() {
      //Jump in js
      this.$router.push({ name: "home" });
    }
  }

More examples:

// Character string
router.push('home')

// object
router.push({ path: 'home' })

// Named routes
router.push({ name: 'user', params: { userId: 123 }})

// With query parameters, change to / register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

More:

Routing Manager Vue Router in Vue (2) - Recommendation

Routing Manager Vue Router in Vue (1)

Element UI Framework + Vue Development and Construction Example