Vue3开发：简单实例说明路由VueRouter4的应用 - Web前端

作者：98wpeu发布时间：2026-09-05分类：网页前端技术浏览：2

导读：vue3开发：简单实例说明路由vueRouter4的应用。vue-router4保持了大部分API不变，我们只关注变化部分即可。一起来学习下吧。安装执行如下命令：yarn add ...

vue3开发：简单实例说明路由vueRouter4的应用。

vue-router4保持了大部分API不变，我们只关注变化部分即可。一起来学习下吧。

安装

执行如下命令：

yarn add VUE-router@4

使用

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

  <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");

标签：路由实例简单 Web VueRouter4 Vue3

上一篇：前端开发：使用React和Tailwind CSS构建网站 - Web前端
下一篇：对于后台返回json数据处理：总结一些常用的方法 - Web前端

Vue3开发：简单实例说明路由VueRouter4的应用 - Web前端

安装

使用

一个小提示

相关推荐