How to use routing to encapsulate public components in a Vue project?

How to use routing to encapsulate public components in a Vue project

During the development process of a Vue project, it is often encountered that the same component needs to be used in multiple pages. In order to avoid writing similar code repeatedly, we can encapsulate these common components and use them in different pages through routing.

Below we use a simple example to illustrate how to use routing to encapsulate public components in the Vue project. Let's say we have a project with two pages: Home.vue and About.vue. Both pages need to use a public component named UserInfo.vue to display user information.

First, create a folder named components in the project. Create a file named UserInfo.vue in this folder to store the code of the public component.

The code of UserInfo.vue is as follows:

<template>
  <div>
    <h2>User Info</h2>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
      },
    }
  },
}
</script>

Next, create a folder named router under the src folder of the project. Create a file named index.js in this folder to configure routing information.

The code of index.js is as follows:

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
]

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

export default router

Next, introduce and use the public component UserInfo.vue in the Home.vue and About.vue files respectively.

The code of Home.vue is as follows:

<template>
  <div>
    <h1>Home Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'Home',
  components: {
    UserInfo,
  },
}
</script>

The code of About.vue is as follows:

<template>
  <div>
    <h1>About Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'About',
  components: {
    UserInfo,
  },
}
</script>

Finally, modify the App.vue file of the project and add vue The -router router-view tag is nested in the appropriate position to display the corresponding view based on the route.

The code of App.vue is as follows:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

So far, we have successfully encapsulated a public component in the Vue project and then used it in different pages through routing. In this way, we can save time and code and improve the development efficiency of the project.

It should be noted that when using routing to encapsulate public components, you need to ensure that vue-router has been correctly installed and configured, and is correctly introduced and registered in the page that requires the use of public components.

The above is how to use routing to encapsulate public components in the Vue project. I hope it will be helpful to everyone.

The above is the detailed content of How to use routing to encapsulate public components in a Vue project?. For more information, please follow other related articles on the PHP Chinese website!