路由
vue-router4保持了大部分API不变，我们只关注变化部分即可。 安装引入
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");完成！😀方便又好用 总结到此这篇关于Vue3使用路由VueRouter4的文章就介绍到这了,更多相关Vue3使用路由VueRouter4内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
iOS微信H5页面橡皮回弹效果的踩坑记录
vue中正确使用jsx语法的姿势分享 |
