vue replaces new route

With the development of Vue, more and more web applications choose to use Vue as the front-end framework. As the application expands and is updated, we need to constantly add new routes and replace old routes. So how to replace routing in Vue?

In Vue, our commonly used routing library is Vue Router. Vue Router is the routing manager officially provided by Vue.js, which can easily realize routing control of SPA (Single Page Application). When using Vue Router, we need to master the following three important concepts:

1. Router
   Router is an instance of Vue Router, which is responsible for creating Vue Router. When defining a route, you need to create an instance using new Router(options). In Vue, we usually write the Router instance separately in a router.js file, and then introduce and mount it to the Vue instance in main.js.
2. Routes
   Routes is an array, where each Route corresponds to a URL path and a component. When the URL matches the route, the corresponding component will be rendered into the tag of App.vue. Each Route object must contain at least two properties: path and component.
3. Router-view
   Router-view is a component provided by Vue Router, used to render the matched Component. In App.vue, we need to add the tag to host the matching Component component.

Next, we will demonstrate how to replace routes in Vue Router. First, assume that our application consists of three pages: home page (Home), user details page (UserDetail) and about us page (AboutUs). Now, we need to change the user details page to the user list page (UserList) and replace the corresponding routes.

In the first step, we need to modify the corresponding route in the router.js file:

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import UserList from '@/views/UserList.vue';
import AboutUs from '@/views/AboutUs.vue';

Vue.use(Router);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/userList',
    name: 'userList',
    component: UserList,
  },
  {
    path: '/aboutUs',
    name: 'aboutUs',
    component: AboutUs,
  },
];

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

export default router;

Here, we replace the UserDetail component with the UserList component and modify the corresponding path. It should be noted that after modifying the routing configuration, we need to restart the Vue application for the modification to take effect.

In the second step, we need to use the router-link tag in the Vue component to perform routing jumps. In our application, we need to add a link to the user list on the homepage so that users can jump directly to the user list page.

Modify the Home.vue page, add a router-link tag, and set the corresponding to attribute:

<template>
  <div>
    <h1>欢迎访问我的应用</h1>
    <router-link to="/userList">用户列表</router-link>
    <router-link to="/aboutUs">关于我们</router-link>
  </div>
</template>

<script>
export default {};
</script>

Here, we set the to attribute to "/userList", indicating that the user clicks the link Then you will jump to the user list page.

In the third step, we need to add relevant business logic to the UserList.vue component. Here, we assume that the user list information is displayed in the UserList component:

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="(user, index) in userList" :key="index">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          name: '小明',
          age: 20,
          gender: '男',
        },
        {
          name: '小红',
          age: 21,
          gender: '女',
        },
        {
          name: '小华',
          age: 22,
          gender: '男',
        },
      ],
    };
  },
};
</script>

Here, we use the v-for directive to render each user object in the userList into a li element.

Through the above steps, we successfully replaced the user details page with the user list page and added the corresponding link to the homepage. In actual development, we need to reasonably design and replace routes according to specific business needs, and at the same time pay attention to the related concepts and usage of Vue Router to ensure the normal operation of the application.

The above is the detailed content of vue replaces new route. For more information, please follow other related articles on the PHP Chinese website!