作者:admin,发布日期:2021-02-04
阅读:3998;评论:0

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

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

Snipaste_2021-02-04_21-01-07.jpg

安装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

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

项目结构参考

Snipaste_2021-02-04_21-05-58.jpg

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


你可能感兴趣的文章