How to use routing to achieve page jump and access in Vue

How to use routing to achieve page jump and access in Vue

Introduction:
In front-end development, page jump is a very common requirement. Vue provides the Vue Router plug-in to implement routing functions, which facilitates us to manage page routing in SPA (single page application). This article will introduce how to use routing to achieve page jump and access in Vue, and give specific code examples.

1. Install and configure Vue Router

1. Install Vue Router
   Open the command line in the project directory and execute the following command to install Vue Router:

   npm install vue-router

2. Configuring Vue Router
   Create a router directory in the project, and then create an index.js file in the directory. Configure Vue Router in the index.js file. The specific code is as follows:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   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

   Here we define two routes, one is the root path '/' and the corresponding component is Home, and the other path is '/ The corresponding component of about' is About.

2. Page jump

1. Write a jump link
   In the Vue template, you can use<router- link></router-> tag to generate a page jump link. For example, we add a link to the About page in the App.vue component. The code is as follows:

   <template>
     <div>
    <h1 id="Hello-Vue-Router">Hello Vue Router!</h1>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
     </div>
   </template>

2. Page rendering
   To display the corresponding component on the page, you need to add it to the Vue template Use the <router-view></router-view> tag to render the component.

3. Page access

1. Get routing parameters in the component
   In routing, data can be passed to the target component through parameters. For example, we obtain the routing parameters and display them in the About component. The code is as follows:

   <template>
     <div>
    <h2 id="About-Page">About Page</h2>
    <p>参数：{{ $route.params.id }}</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'About'
   }
   </script>

   In the above code, we obtain the routing parameters through $route.params.id and display them on the page displayed in.

2. Writing dynamic routing
   Sometimes the page address that needs to be jumped to is dynamically generated, and we can use dynamic routing to achieve this. For example, we create a new component Profile and define a dynamic route. The specific code is as follows:

   // 路由配置
   const routes = [
     // ...
     {
    path: '/profile/:username',
    name: 'Profile',
    component: Profile
     }
   ]
   
   // Profile组件
   <template>
     <div>
    <h2 id="Profile-Page">Profile Page</h2>
    <p>用户名：{{ $route.params.username }}</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Profile'
   }
   </script>

   In the above code, we define a dynamic route /profile/:username, Then use $route.params.username in the Profile component to obtain the dynamic user name and display it on the page.

Summary:
This article introduces how to use routing to achieve page jump and access in Vue. By installing and configuring Vue Router, we can flexibly manage page jumps and access in SPA. I hope this article will help you learn Vue routing and let you better master Vue development skills.

The above is the detailed content of How to use routing to achieve page jump and access in Vue. For more information, please follow other related articles on the PHP Chinese website!