VUE3 development introductory tutorial: using Vue.js front-end routing

Vue.js is one of the most popular JavaScript frameworks at present. It is used in various front-end projects because of its simplicity, ease of use, efficiency and speed. Especially after the release of the VUE3 version, its principles and design have become clearer, and its performance has also been greatly improved. If you are looking for a quick and easy way to develop a modern front-end website or application, then Vue.js is well worth learning and mastering. This article will introduce an introductory tutorial for VUE3 development, focusing on how to use Vue.js front-end routing.

What is the role of Vue.js front-end routing?

In a single-page application, page switching is achieved through front-end routing. Front-end routing means that in web applications, the URL address remains unchanged and the content of the page is changed through JavaScript to achieve asynchronous loading and no refresh switching. It associates different URLs with different components or page templates, forming a complete front-end routing system. In Vue.js, we can implement the front-end routing function through the vue-router plug-in.

vue-router introduction

vue-router is a routing plug-in officially provided by Vue.js, which is used to implement the front-end routing function of single-page applications. It is tightly integrated with Vue.js, making it easy to develop single-page applications using Vue.js. It provides a variety of routing modes and supports rich functions such as dynamic routing, nested routing, named routing, etc. And vue-router also supports lazy loading of routes, which improves application performance.

Install vue-router

Before you start using vue-router, you need to install the vue-router plug-in first. You can install it through the npm command:

npm install vue-router

Define the Router of Vue.js

Before using vue-router, you need to define the Router. Router is one of the core components of vue-router. It is responsible for routing and matching all URL requests and rendering the matched components to the specified area.

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({
  routes
})

export default router

In the above code, we first introduce Vue and VueRouter, and install VueRouter into Vue through the Vue.use() method. Then two routing rules are defined, corresponding to the homepage and about page respectively. These rules are defined through the path, name and component attributes. Finally, we pass these rules to a new VueRouter instance and export the router object.

Using Vue.js front-end routing

After defining the Router, we need to use it in the vue component. Vue components can be used to render different areas on the page. We can use the built-in component router-view of Vue.js to display the matched components.

<template>
  <div class="wrapper">
    <h1>{{ msg }}</h1>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'Welcome to my VUE3 Web App!'
    }
  }
}
</script>

router-link is a built-in component of Vue.js, used to generate links and associate links with routers. When the user clicks on a link, Router automatically renders the Vue component that matches the link.

Summary

This article introduces the introductory tutorial for VUE3 development, focusing on how to use Vue.js front-end routing. Vue.js is a great JavaScript framework especially suitable for developing single-page and mobile applications. The routing module vue-router of Vue.js has many excellent functions that can help us develop routing functions very easily. I hope that the introduction in this article can help beginners better master the routing function of Vue.js.

The above is the detailed content of VUE3 development introductory tutorial: using Vue.js front-end routing. For more information, please follow other related articles on the PHP Chinese website!