Vue3.0 项目常用依赖配置——安装路由
参考文章https://blog.csdn.net/Jie_1997/article/details/118728628
在views下新建一个组件
About.vue
<template> <div>我是about界面</div> </template> <script> export default {}; </script> <style scoped></style>
app.vue
<template> <router-view /> </template> <script> import HomeView from "./views/Home.vue"; export default { name: "App", components: { HomeView, }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
1:安装依赖
npm install vue-router@next --save
安装成功之后 打开package.json文件可以看到路由安装成功的版本"vue-router": "^4.0.13",
2：src 文件夹下创建 router 文件夹，router 文件夹下创建 index.js 文件
配置 router.js 文件
import { createRouter, createWebHashHistory, createWebHistory, } from "vue-router"; // 1. 定义路由组件， 注意，这里一定要使用 文件的全名(包含文件后缀名) import Home from "../views/Home.vue"; import About from "../views/About.vue"; // 2. 定义路由配置 const routes = [ { path: "/", name: "Home", component: Home, }, { path: "/about", name: "About", //component: About, //按需引入：把component写成箭头函数的形式，然后return通过import的方式引入组件的相对路径 //如果没有访问这个路径，就不会加载这个组件，实际上为了节约性能 component: () => import("../views/About.vue"), }, ]; // 3. 创建路由实例 const router = createRouter({ // 4. 采用hash 模式 // history: createWebHashHistory(), // 采用 history 模式 history: createWebHistory(), routes, // short for `routes: routes` }); export default router;
3：main.js 中引用
import { createApp } from "vue"; import App from "./App.vue"; import store from "./store"; import router from "./router"; const app = createApp(App); app.use(store); app.use(router); app.mount("#app");
4:访问
首页
about页面
