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
How to decrypt Linux version information
Displaying and interpreting information about you...
How to sort a row or column in mysql
method: By desc: Neither can be achieved: Method ...
Docker container monitoring and log management implementation process analysis
When the scale of Docker deployment becomes large...
Detailed explanation of mixins in Vue.js
Mixins provide distributed reusable functionality...
Introduction to Computed Properties in Vue
Table of contents 1. What is a calculated propert...
Vue implements a scroll bar style
At first, I wanted to modify the browser scroll b...
Detailed implementation plan of Vue front-end exporting Excel files
Table of contents 1. Technology Selection 2. Tech...
Implement full screen and monitor exit full screen in Vue
Table of contents Preface: Implementation steps: ...
jQuery uses the canvas tag to draw the verification code
The <canvas> element is designed for client...
Centos8 builds nfs based on kdc encryption
Table of contents Configuration nfs server (nfs.s...
Detailed explanation of count without filter conditions in MySQL
count(*) accomplish 1. MyISAM: Stores the total n...
Detailed explanation of Nest.js parameter validation and custom return data format
0x0 Parameter verification Most of the parameter ...
Linux cut command explained
The cut command in Linux and Unix is ​​used to cu...
Complete steps for deploying a front-end and back-end separated nginx configuration
Preface It's a cliché. Here I will talk about...
WeChat applet Amap multi-point route planning process example detailed explanation
Call How to call Amap API? The official open docu...