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

(5)在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的<template>中引入

<router-link to="/bar">首页</router-link>
<router-link to="/foo">电影</router-link>
<router-link to="/user">关于</router-link>
<router-view/>