How to create dynamic routes using Vue and Vue-Router?

How to create dynamic routing using Vue and Vue-Router?

In modern web applications, dynamic routing is one of the very common and important features. Vue and Vue-Router are two popular front-end frameworks that can help us create dynamic routing easily. In this article, I will introduce how to use Vue and Vue-Router to implement dynamic routing and give some specific code examples.

First, we need to install Vue and Vue-Router. Run the following command in the terminal:

npm install vue vue-router

Once the installation is complete, we can start creating our Vue application.

Create a new Vue project and open the terminal in the project folder.

Run the following command to create a Vue instance:

vue create dynamic-router

After the creation is completed, enter the project folder and install Vue-Router:

cd dynamic-router
npm install vue-router

Now, we can start writing Our dynamic routing.

First, we need to create a router folder under the src folder, and create an index.js file under the folder .

Open the index.js file and add the following code:

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

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

export default router

In the above code, we define a routes array, which contains our dynamic routing. We can see that in addition to the regular routing path, we also define a dynamic routing path /user/:id.
The id parameter here can be any user ID we want to specify.

In the dynamic routing component, we need to use $route.params in the <template> tag of the Vue component to access the dynamic routing parameters. For example, in the User.vue component, we can use $route.params.id to get the user ID.

Now, we need to create a views folder under the src folder, and create Home.vue, About.vue and User.vue components.

Enter the Home.vue component and edit the following code:

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

Enter the About.vue component and edit the following code:

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

Enter the User.vue component and edit the following code:

<template>
  <div>
    <h1>User Profile</h1>
    <h2>User ID: {{ $route.params.id }}</h2>
  </div>
</template>

When the user accesses the /user/:id path, ## will be rendered #User.vue component and displays the user's ID.

main.js file under the src folder.

main.js file and edit the following code:

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

Vue.config.productionTip = false

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

npm run serve

http://localhost:8080.

http://localhost:8080/user/123 in the browser address bar, you will see a page containing "User Profile" and "User ID: 123".

The above is the detailed content of How to create dynamic routes using Vue and Vue-Router?. For more information, please follow other related articles on the PHP Chinese website!