vue3项目中配置路由的步骤
1.先创建项目a文件夹:
(1)我在这里使用的是vite方法配置的vue:
npm init vite-app a
cd a
npm i
npm run dev
(2)在新建的文件夹a里安装:
npm i vue-router
删减清理文件
(3)在components中新建3个vue组件并添加内容:
Bar.vue,Foo.vue,User.vue
(4)在src中新建router文件夹并在文件夹中新建index.js
import {createRouter,createWebHashHistory} from "vue-router" //1.引入配置路由的两个方法 -------------------------------------------------------------------------------------- //2.引入单组件 import Bar from "../components/Bar.vue"; import Foo from "../components/Foo.vue"; import User from "../components/User.vue"; -------------------------------------------------------------------------------------- //3.两种写法: 1.合写 const router=createRouter({ history:createWebHashHistory(), linkActiveClass:"router-active", routes:[ //{path:'/',redirect:'/home'}, {path:'/bar',component:Bar}, {path:'/foo',component:Foo}, {path:'/user',component:User} //触发bar时出现Bar组件 ] }) ---------------------------------------------------------------------- 2.分写 //创建路由信息对象数组routes const routes = [ {path: '/bar', component: Bar}, {path: '/foo', component: Foo}, {path: '/user', component: User} //触发bar时出现Bar组件 ] //创建路由管理器对象 const router=createRouter({ history: createWebHashHistory(), routes }) --------------------------------------------------------------------------- //4.最后将路由管理器对象对外输出 export default router
注意 / 后连接名要相对应
(6)在main.js中引入router来关联起index.js和vue:
import router from "./router"
将配置好的路由器管理对象与当前vue项目相关联:
createApp(App).use(router).mount('#app')
(7)在app.vue的中引入
首页 电影 关于