A simple example of using Vue3 routing VueRouter4
routingvue-router4 keeps most of the API unchanged, so we only need to focus on the changes. Installyarn add vue-router@4 Introduction cdn <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.cjs.js"></script> userouter.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 tipIf 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 SummarizeThis 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 example of deploying Nginx+Apache dynamic and static separation
>>: A brief introduction to mysql mycat middleware
Recommend
Count the list tags in HTML
1. <dl> defines a list, <dt> defines ...
Bug of Chinese input garbled characters in flex program Firefox
Chinese characters cannot be input in lower versio...
Basic Implementation of AOP Programming in JavaScript
Introduction to AOP The main function of AOP (Asp...
MySQL database optimization: index implementation principle and usage analysis
This article uses examples to illustrate the prin...
Detailed explanation of the use of Teleport in Vue3
Table of contents Purpose of Teleport How Telepor...
js to implement collision detection
This article example shares the specific code of ...
Building an image server with FastDFS under Linux
Table of contents Server Planning 1. Install syst...
Detailed tutorial on building an ETCD cluster for Docker microservices
Table of contents Features of etcd There are thre...
How to implement web stress testing through Apache Bench
1. Introduction to Apache Bench ApacheBench is a ...
mysql create database, add users, user authorization practical method
1. Create a MySQL database 1. Create database syn...
How to filter out duplicate data when inserting large amounts of data into MySQL
Table of contents 1. Discover the problem 2. Dele...
A brief introduction to web2.0 products and functions
<br />What is web2.0? Web2.0 includes those ...
The "3I" Standards for Successful Print Advertising
For many domestic advertisers, the creation and ev...
How to use shell scripts in node
background During development, we may need some s...
Detailed description of shallow copy and deep copy in js
Table of contents 1. js memory 2. Assignment 3. S...