How to use routing to switch between pages and transfer parameters in a Vue project?

How to use routing to switch between pages and transfer parameters in a Vue project?

In the Vue project, we can use Vue Router to switch between pages and pass parameters. Vue Router is an officially recommended plug-in for implementing routing functions. It can easily implement page switching in single-page applications and supports passing parameters.

First, we need to install the Vue Router plug-in in the Vue project. You can install it through the npm command:

npm install vue-router

After installation, introduce Vue Router in the project's entry file (usually main.js) and create a routing instance:

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({
  routes
})

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

In the above code , we introduce VueRouter through the import statement and register the plug-in in the Vue instance. Next, we defined the routing configuration object routes, which contains two routing paths and corresponding components. When accessing the root path '/', the Home component will be rendered; when accessing '/about', the About component will be rendered. Finally, we create the routing instance by instantiating VueRouter and passing in the routing configuration object.

After creating the routing instance, we can use b988a8fd72e5e0e42afffd18f951b277 and 975b587bf85a482ea10b0a28848e78a4 in the Vue component to switch between pages.

b988a8fd72e5e0e42afffd18f951b277 is a component provided by Vue Router, used to generate links. It will automatically render into an a tag. Clicking on the link will trigger a routing jump. We can use b988a8fd72e5e0e42afffd18f951b277 in the component's template to switch between pages. For example, in the template of the Home component, we can use b988a8fd72e5e0e42afffd18f951b277 like this:

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

In the above code, when the "Go to About" link is clicked, it will jump to the /about path.

975b587bf85a482ea10b0a28848e78a4 is a component provided by Vue Router, used to render components corresponding to the current route. We can use 975b587bf85a482ea10b0a28848e78a4 in the template of the Vue component to display the component corresponding to the current route. For example, in the template of the App component, we can use 975b587bf85a482ea10b0a28848e78a4 like this:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

In this way, when the '/' or '/about' path is accessed, the Home component and About component will be rendered respectively. .

In addition to switching between pages, Vue Router also supports passing parameters. When defining a routing path, you can specify parameters by using placeholders in the path. For example, we can define a routing path that contains parameters:

{
  path: '/user/:id',
  name: 'user',
  component: User
}

In the above code, we define a routing path of /user/:id, where :id is a parameter. When we access /user/123, :id will be replaced with the actual value, for example, :id will be replaced with 123.

In the Vue component, we can get routing parameters through this.$route.params. For example, in the User component, we can get the routing parameters like this:

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出路由参数的值
  }
}

The above code will output the values ​​of the routing parameters after the User component is loaded.

To sum up, through the Vue Router plug-in, we can easily switch between pages and transfer parameters in the Vue project. Page switching is implemented through b988a8fd72e5e0e42afffd18f951b277 and 975b587bf85a482ea10b0a28848e78a4, and parameters are passed by defining the routing path. Using Vue Router can improve the maintainability and scalability of the project, making page switching and parameter transfer more flexible and convenient.

The above is the detailed content of How to use routing to switch between pages and transfer parameters in a Vue project?. For more information, please follow other related articles on the PHP Chinese website!