作者:admin,发布日期:2021-02-04
阅读:3998;评论: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");