[Vue3] Vite脚手架中使用vue-router

作者：admin，发布日期：2021-02-04
阅读：4563；评论：0

仅做个人记录，适用于vue3，vue2请参考vue-cli生成的文件。

项目创建请参考上一篇文章：https://blog.craftyun.cn/post/226.html

安装vue-router

此处需要用到vue-router-next，目前项目已经发布为正式版。

代码地址：https://github.com/vuejs/vue-router-next

文档地址：https://next.router.vuejs.org/

使用yarn安装软件包

yarn add vue-router@4

配置vue-router

安装完成后，即可开始配置。

项目结构参考

创建index.js

在src目录下创建router子目录，在其内部创建index.js。

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/testPage",
    name: "TestPage",
    component: import("../views/TestPage.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

• history - 为url的显示方式，参考：https://next.router.vuejs.org/guide/essentials/history-mode.html

• routes - 用户定义的路由

创建两个测试页面

在src目录下创建view子目录，创建Home.vue和TestPage.vue两个测试页面。

Home.vue

<template>
  <div>this is home</div>
</template>

TestPage.vue

<template>test page</template>

修改App.vue，增加导航和路由视图。

App.vue

<template>
  <div>
    <router-link :to="{ name: 'Home' }">Home</router-link> |
    <router-link :to="{ name: 'TestPage' }">TestPage</router-link>
  </div>
  <router-view />
</template>

<script>
export default {};
</script>

引入vue-router

配置完上述内容，即可在main.js中引入vue-router，参考下方代码，vue-router4使用createRouter()创建的对象可直接app.use()，省去旧版的Vue.use(VueRouter);

import router from "./router";

app.use(router);

main.js完整代码请参考下方，其中引入了其他类库。

import { createApp } from "vue";
import Antd from "ant-design-vue";
import App from "./App.vue";
import router from "./router";
import axios from "axios";
import VueAxios from "vue-axios";
import "ant-design-vue/dist/antd.css";

const app = createApp(App);
app.use(router);
app.use(VueAxios, axios);
app.use(Antd);
app.mount("#app");