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></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 id="Home">Home</h1>
  </div>
</template>

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

<template>
  <div>
    <h1 id="About">About</h1>
  </div>
</template>

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

<template>
  <div>
    <h1 id="User-Profile">User Profile</h1>
    <h2 id="User-ID-route-params-id">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.

Finally, we need to introduce and use our route in the

main.js file under the src folder.

Open the

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')

Now, we have completed the configuration of Vue and Vue-Router and can start our application .

Run the following command in the terminal:

npm run serve

Then open a browser window and visit

http://localhost:8080.

You will see a Home page, click the About link on the navigation bar, and you will be redirected to the About page. Additionally, if you enter

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

This is a simple example of how to use Vue and Vue-Router to create dynamic routing. Hope this article is helpful to you!

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!