JS项目配置路由

1.安装路由 yarn add vue-router

2.创建路由配置：

在src目录下创建router目录（将所有与路由相关的文件都会放在这个目录下）

yarn add @vitejs/plugin-vue

 

3.在src目录下创建router目录，在 router 目录下创建 index.js 文件： src/router/index.js， 创建路由模块，用于导入，将一下代码段写入index.js 

// 创建路由，路由展示方式，
import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'
// 定义所有路由配置
import {routes} from './routes'

const router = createRouter({
	// url展示方式
	history: createWebHistory(),
	// 配置路由信息
	routes
})
// 导出router，让外部识别
export default router

4.在 router 目录下创建 routes.js 文件： src/router/routes.js,真正的路由配置，放在这个文件中，该文件需要 export 一个 routes 的数组变量 暂时设置为空数组，后面使用的时候再添加内容

将一下代码写入routes.js

export const routes = []

5.挂载路由到根实例

在 main.js 文件中，将 vue - router 引入 vue 项目： main.js，这里可以将所有的相对引用都改成使用别名引用

6.增加router-view

 

7.定义路由： src/router/routes.js ， 在 routes.js 文件中配置路由，

 8.检测是否配置成功

8.1在src/components创建tabbar目录，在tabbar目录下创建TabBar.vue文件，

在TabBar.vue中写入下面代码：

<template>
	<van-tabbar v-model="active">
		<van-tabbar-item icon="home-o" to="/home">home</van-tabbar-item>
		<van-tabbar-item icon="search" to="/about">about</van-tabbar-item>
		<van-tabbar-item icon="friends-o" url="/about" >标签</van-tabbar-item>
		<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
	</van-tabbar>
</template>

<script setup>
	import {ref} from 'vue'
	const active = ref(0)
</script>

<style>
</style>

在App.vue中引入TabBar.vue

这里定义了两个路由，分别指向 src/views 目录下的 home/Home.vue 及 about/About.vue

在Home.vue和About.vue中分别写入

 

在终端，输入yarn dev启动项目

复制链接地址到浏览器，如果能达到下面效果，说明：路由配置成功