How to use Vue Router to implement dynamic matching and monitoring of URL parameters?

How to use Vue Router to implement dynamic matching and monitoring of URL parameters?

Vue Router is the official routing management plug-in of Vue.js. It can help us implement the routing function of single-page applications in Vue.js applications. Vue Router can not only perform basic routing jumps, but also dynamically match and monitor based on URL parameters. This article will introduce how to use Vue Router to implement dynamic matching and monitoring of URL parameters, and provide some code examples for readers' reference.

First, we need to install and introduce the Vue Router plug-in into the Vue.js project. For specific installation methods, please refer to the official documentation of Vue Router. After the installation is complete, introduce Vue Router in the main file of the Vue project (usually main.js).

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Next, we can create a router.js file in the root directory of the Vue project and define our routing configuration in this file. In routing configuration, we can use colon (:) to define dynamic parameters. The sample code is as follows:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import User from './views/User.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

In the above code, we define two routes: one is the root path "/", and the corresponding component is the Home component; the other is the path "/" with dynamic parameters user/:id", the corresponding component is the User component, and we use the parameter id as a dynamic parameter.

Next, we can receive and use this dynamic parameter in the User component. The sample code is as follows:

<template>
  <div>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      userId: ''
    }
  },
  created() {
    this.userId = this.$route.params.id
  },
  watch: {
    '$route.params.id'(newId) {
      this.userId = newId
    }
  }
}
</script>

In the above code, we obtain the value of the dynamic parameter id through this.$route.params.id in the created life cycle hook and assign it to the userId attribute. At the same time, we also use watch to monitor changes in dynamic parameters. When the parameter id changes, the value of userId is updated.

Finally, we need to inject the router configuration into the Vue instance. We can introduce router.js in the main file of the Vue project and pass in the router configuration when creating a Vue instance. The sample code is as follows:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

So far, we have implemented dynamic matching and monitoring of URL parameters through Vue Router. When we access "/user/1", the User component will display User ID: 1. When we access "/user/2", the User component will display User ID: 2. We can perform corresponding logical processing in the component based on changes in dynamic parameters according to actual needs.

To summarize, this article introduces how to use Vue Router to implement dynamic matching and monitoring of URL parameters. We can define dynamic parameters by using colon (:) in the route configuration, and get the value of the parameter through this.$route.params in the component. In addition, we can also use watch to monitor changes in dynamic parameters and perform corresponding logical processing according to actual needs. I hope the content of this article will be helpful to readers when using Vue Router to process URL parameters.

The above is the detailed content of How to use Vue Router to implement dynamic matching and monitoring of URL parameters?. For more information, please follow other related articles on the PHP Chinese website!