VUE3 entry development: using Vue-Router to achieve page jump

Vue 3 is one of the most popular JavaScript frameworks for building interactive user interfaces. Vue-Router is a plug-in for the Vue framework, used to implement routing management in single-page applications. In this article, we will introduce how to use Vue-Router to implement page jumps in Vue 3.

1. Install and configure Vue-Router

Before you begin, make sure you have Vue 3 installed. If it is not installed yet, you can refer to the official documentation to install it: https://v3.cn.vuejs.org/guide/installation.html.

Install Vue-Router:

In the terminal, run the following command to install:

npm install vue-router@4.0.0-alpha.13

In Vue 3, the version of Vue-Router should be no less than 4.0. 0-alpha.13.

After installing Vue-Router, we need to configure Vue-Router in the Vue 3 application. Create a routes.js file:

import Home from '@/components/Home'
import About from '@/components/About'

export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

In this file, we define two routes, one is the homepage (Home) and the other is the about us (About) page.

We also need to import Vue-Router in the entry file (main.js) of the Vue 3 application and configure it:

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes
})

const app = createApp(App)

app.use(router)

app.mount('#app')

In this file, we create a router instance, and use the createWebHistory function to create the router's schema. We also pass routes to the router instance.

In Vue 3, we use the app.use() method to install the Vue-Router plugin into the Vue application. Finally, place the app.mount() method after the app.use() method. This ensures that Vue-Router has been installed correctly and the application can run normally.

2. Implement page jump

Now that we have successfully installed and configured Vue-Router, we will use Vue-Router to implement page jump.

1. Add a routing link in the App.vue file:

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

In this template, we use the component to create a routing link, specify to The attribute is the routing path.

2. Add content in Home.vue and About.vue

We have created two Vue components for the Home and About pages, and we need to add them to the templates of these components Add some content to verify that the page jumps normally.

Home.vue:

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page</p>
  </div>
</template>

About.vue:

<template>
  <div>
    <h2>About</h2>
    <p>Welcome to the about page</p>
  </div>
</template>

Now, we have successfully set up the routing link and page content. We can use these links to jump to pages.

3. Summary

In this article, we learned how to use Vue-Router to implement page jumps in Vue 3. First, we install and configure Vue-Router. Then, we create the route link using the component. Finally, we add content to the component template to verify whether the page jumps successfully.

Vue-Router has many other functions, such as dynamic routing, nested routing, route guards, etc. By mastering these features, you can create complex single-page applications and use jumps and navigation within your applications.

The above is the detailed content of VUE3 entry development: using Vue-Router to achieve page jump. For more information, please follow other related articles on the PHP Chinese website!