Use vue-router to implement page navigation

How Vue uses vue-router to jump to pages

With the development of front-end development, single-page applications are increasingly favored by developers. In the Vue framework, we can use vue-router to jump between pages to provide users with a smoother browsing experience. In this article, I will introduce in detail how to use vue-router for page jumps and give specific code examples.

First, we need to install the vue-router dependency library. Run the following command on the command line to install:

npm install vue-router

After the installation is complete, introduce vue-router into the project's entry file (usually main.js) and mount it on the Vue instance. The code is as follows:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  routes: [
    // 配置路径和组件的映射关系
  ]
});

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

In the above code, we first introduced Vue and VueRouter through the import statement, and then installed the VueRouter plug-in through the Vue.use() method. Next, we created a routing instance and configured the mode and routes attributes. The mode attribute can be set to history or hash, which correspond to the history mode of HTML5 and the hash mode of the URL respectively. The routes attribute is used to configure the mapping relationship between paths and components. We will perform specific configurations later.

Before configuring the routing mapping relationship, we need to create the components corresponding to each page. In the Vue framework, each page usually corresponds to a component. In the Vue file, the way to define a component is as follows:

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  name: 'ComponentName',
  // 组件的其他配置项
}
</script>

<style scoped>
/* 组件的样式 */
</style>

In the above code, we first define the HTML structure of the component through the template tag, export a default component in the script tag, and Sets the component's name attribute. Finally, we can define the style of the component through the style tag. Using the scoped attribute, the style will only take effect on the current component.

After having the component, we can jump between pages by configuring the routing mapping relationship. In the routes attribute of the routing instance, we can configure the mapping relationship between paths and components through each object. The code is as follows:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // 其他路由配置
  ]
});

In the above code, we set the path through the path attribute, set the name of the route through the name attribute, and set the corresponding component through the component attribute. Among them, '/' represents the root path, and 'about' represents the /about path. In this way, when the corresponding path is accessed, the corresponding component will be loaded.

After configuring the routing mapping relationship, we can use the router-link component provided by vue-router in the component to implement page jumps. Just pass the path to be jumped to the router-link component as the to attribute. The code is as follows:

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

In addition to using the router-link component, we can also use the methods provided by the router object in JavaScript code to implement page jumps. Among them, the most commonly used methods are push() and replace(). The former will add a new record to the history record, and the latter will replace the current history record. The code is as follows:

// 在组件的某个方法中使用push()方法跳转页面
this.$router.push('/about');

// 在组件的某个方法中使用replace()方法跳转页面
this.$router.replace('/about');

So far, we have introduced the detailed steps of how to use vue-router to jump to the page, and given specific code examples. By properly configuring the route mapping relationship and using the methods provided by vue-router, we can easily jump between pages and provide users with a good browsing experience. I hope this article is helpful to you, thank you for reading!

The above is the detailed content of Use vue-router to implement page navigation. For more information, please follow other related articles on the PHP Chinese website!