脚本宝典收集整理的这篇文章主要介绍了Vue3使用路由VueRouter4的简单示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
vue-router4保持了大部分API不变，我们只关注变化部分即可。
yarn add vue-router@4
引入
cdn
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.cjs.js"></script>
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>
如果你的 App.vue 模板只有 <router-view></router-view> 时， 可以吧 <router-view> 直接放入 index.htML 中。
例如：
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>
之后 main.js 内移除 App.vue
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");
完成！€512;方便又好用
到此这篇关于Vue3使用路由VueRouter4的文章就介绍到这了,更多相关Vue3使用路由VueRouter4内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的Vue3使用路由VueRouter4的简单示例全部内容，希望文章能够帮你解决Vue3使用路由VueRouter4的简单示例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。