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
A simple example of MySQL joint table query
MySql uses joined table queries, which may be dif...
XHTML Getting Started Tutorial: XHTML Hyperlinks
It is no exaggeration to say that hyperlinks conne...
Should I use distinct or group by to remove duplicates in MySQL?
Preface About the performance comparison between ...
How to use mysqldump to backup MySQL data
1. Introduction to mysqldump mysqldump is a logic...
Canonical enables Linux desktop apps with Flutter (recommended)
Google's goal with Flutter has always been to...
Node.js solves the problem of Chinese garbled characters in client request data
Node.js solves the problem of Chinese garbled cha...
javascript to switch pictures by clicking a button
This article example shares the specific code of ...
Vue3.0 implements the magnifying glass effect case study
The effect to be achieved is: fixed zoom in twice...
Vuex combines session storage data to solve the problem of data loss when refreshing the page
Table of contents Preface 1. Reasons: 2. Solution...
Pure CSS to display the √ sign in the lower right corner after selecting the product
Recommended articles: Click on the lower right co...
Detailed explanation of cocoscreater prefab
Table of contents Prefab How to create a prefab T...
The use of anchor points in HTML_PowerNode Java Academy
Now let's summarize several situations of con...
Example of using setInterval function in React
This article is based on the Windows 10 system en...
HTML table markup tutorial (18): table header
<br />The header refers to the first row of ...
Text pop-up effects implemented with CSS3
Achieve resultsImplementation Code html <div&g...