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 and in the Vue component to switch between pages.

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 in the component's template to switch between pages. For example, in the template of the Home component, we can use 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.

is a component provided by Vue Router, used to render components corresponding to the current route. We can use 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 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 and , 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!