A simple example of using Vue3 routing VueRouter4

A simple example of using Vue3 routing VueRouter4

routing

vue-router4 keeps most of the API unchanged, so we only need to focus on the changes.

Install

yarn add vue-router@4

Introduction

cdn

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.cjs.js"></script>

use

router.js

import { createRouter, createWebHistory } from "vue-router";

import Home from "./views/Home.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: () => import("./views/About.vue") }
];

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

export default router;

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

App.vue

<template>
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</template>

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

A little tip

If your App.vue template only has <router-view></router-view>, you can put <router-view> directly into index.html.

For example:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" rel="external nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Then remove App.vue in main.js

main.js

import { createApp } from "vue";
// import App from "./App.vue";
import router from "./router";

// const app = createApp(App);
const app = createApp({});
app.use(router);
app.mount("#app");

Finish! 😀Convenient and easy to use

Summarize

This is the end of this article about Vue3 using routing VueRouter4. For more relevant content about Vue3 using routing VueRouter4, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of vue-router 4 usage examples
  • Detailed explanation of the use of router-view components in Vue
  • Detailed explanation of the installation and use of Vue-Router
  • Complete steps to use vue-router in vue3
  • How to use Vue-router routing
  • Do you know how to use Router in vue3.0?

<<:  Detailed example of deploying Nginx+Apache dynamic and static separation

>>:  A brief introduction to mysql mycat middleware

Recommend

Web project development VUE mixing and inheritance principle

Table of contents Mixin Mixin Note (duplicate nam...

How to deploy Angular project using Docker

There are two ways to deploy Angular projects wit...

Unbind SSH key pairs from one or more Linux instances

DetachKeyPair Unbind SSH key pairs from one or mo...

Tutorial on configuring SSH and Xshell to connect to the server in Linux (with pictures)

>>>>>Ubuntu installation and confi...

How to elegantly implement WeChat authorized login in Vue3 project

Table of contents Preface Prepare Implementation ...

How to modify the default storage engine in MySQL

mysql storage engine: The MySQL server adopts a m...

Three ways to achieve text flashing effect in CSS3 Example code

1. Change the transparency to achieve the gradual...

Some slightly more complex usage example codes in mysql

Preface I believe that the syntax of MySQL is not...

Detailed explanation of Xshell common problems and related configurations

This article introduces common problems of Xshell...

MySQL 8.0.15 installation tutorial for Windows 64-bit

First go to the official website to download and ...

How to set up jar application startup on CentOS7

Pitfalls encountered during project deployment Wh...

Solution to mysql login warning problem

1. Introduction When we log in to MySQL, we often...

Docker completely deletes private library images

First, let’s take a look at the general practices...

Summary of problems encountered when installing docker on win10 home version

Docker download address: http://get.daocloud.io/#...

Nginx source code compilation and installation process record

The installation of the rpm package is relatively...