【Vue3中Router使用】

Vue3中Router使用

1. 安装`vue-router`组件
2. 建两个测试页面
- 2.1 测试页面`Home.vue`
- 2.2 测试页面`Category.vue`
3. 创建路由对象
4. 在入口`main.js`中引入`router`
把`App.vue`改成路由页面
5. 测试
- 5.1 关闭检查解决`ESlint`报错
- 5.2 改文件名解决`ESlint`检查报错
- 测试`WebHashHistory` 和`WebHistory`的区别
6. 管理系统的路由尝试
- 6.1 修改`App.vue`
- 6.2 创建`Portal.vue`
- 6.3 创建`Main.vue`
- 6.4 建登录界面
- 6.4.1 安装`less`的模块
- 6.4.2 安装`ElementPlus`的图标
- 6.4.3 登录页面效果
- 6.5 修改路由
- 6.6 测试效果
- 6.7 遗留问题.

这里的内容是基于前面搭建的环境进行的,自我摸索过程有不对的地方请希望不怜赐教。

1. 安装`vue-router`组件

Vue3对应的router组件是vue-router，所以执行下面的命令进行安装router组件。

npm install vue-route

2. 建两个测试页面

在src目录下创建一个views目录,在目录先建两个页面,用于路由测试。

2.1 测试页面`Home.vue`

<template><div>This is Home Page....</div>
</template>
<script>export default {// name:"Home"}
</script>
<style scoped>
</style>

2.2 测试页面`Category.vue`

<template><div>This is Category....</div>
</template>
<script>export default {}
</script>
<style scoped>
</style>

3. 创建路由对象

在src目录下创建router文件夹，并在其中创建一个index.js文件, 整体来说就是创建文件src\router\index.js。在文件中编辑内容如下:

import { createRouter, createWebHashHistory } from "vue-router";
import Home from '@/views/Home.vue'
import Category from '@/views/Category.vue'
const routes = [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/category', component: Category },
]const router = createRouter({history: createWebHashHistory(),routes, // short for `routes: routes`
})export default router

createWebHashHistory()，这个应该是采用hash路由的方式，也就是url地址通过#符号进行路由定位。与之对应的是createWebHistory()方法,路由就是一个纯纯的URL地址。后续我们再测试一下。

4. 在入口`main.js`中引入`router`

首先是引入router对象

import router from '@/router'

再次需要应用router对象,使用use方法

createApp(App).use(router).mount('#app')

上面一段相对之前增加了use(router)部分。改变之后的main.js如下.

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
import router from '@/router'
createApp(App).use(router).mount('#app')

PS: 引入router的时候千万不能加中括号写成了import {router} from '@/router'

把`App.vue`改成路由页面

<template><div><div>app</div><router-link to="/home">首页</router-link><router-link to="/category">关于</router-link><router-view></router-view></div>
</template>
<script>
</script>
<style>
</style>

5. 测试

做完上述的一切，其实已经可以对路由功能进行测试了。但是很遗憾，启动的时候报错了，是Eslint代码规范检查报错了，启动不了。报错信息如下.
ESlient报错
报错的核心内容应该是 Component name "Category" should always be multi-word vue/multi-word-component-names。猜测应该就是说我这文件名不规范吧，要求多个单词做文件名。根据经验来说要么就是遵守规范把文件名改了,要么就是把检查给关了。哪就两种都试试把。

5.1 关闭检查解决`ESlint`报错

首先在工程根目录下创建.eslintrc.json。文件中的配置内容如下:

{"env": {"browser": true,"es2021": true,"node": true},"extends": ["plugin:vue/vue3-essential"],"plugins": ["vue"],"rules": {"import/no-unresolved": "off","import/extensions": "off","import/no-absolute-path": "off","import/no-extraneous-dependencies": "off","vue/no-multiple-template-root": "off","vue/multi-word-component-names": "off","no-param-reassign": ["error",{"props": true,"ignorePropertyModificationsFor": ["state","config"]}]},"settings": {}
}

把文件名的检测规则关掉"vue/multi-word-component-names": "off",.然后就可以启动了.启动之后的控制台信息:
启动控制台
然后访问http://localhost:8080/，因为路由种配置了默认的路由重定向到/home，所以页面会重定向到http://localhost:8080/#/home.得到的测试界面为:

关于和首页是两个超链接，点击可以切换到不同的路由.

5.2 改文件名解决`ESlint`检查报错

为了验证vue/multi-word-component-names校验报错的问题。为了测试，我们讲该项改为error.

 "vue/multi-word-component-names": "error"

改完之后,再重新运行

npm run serve

错误再次出现.
在这里插入图片描述
接下来我们按照要求吧Home.vue 改成TestHome.vue, Category.vue 改成TestCategory.vue。同时，注意需要将router/index.js的引用部分也改一下。
改后的内容:

测试`WebHashHistory` 和`WebHistory`的区别

首先以上的测试使用是是WebHashHistory的方式，所以所以看出路由的方式是#加上路由的地址。这里再使用下WebHistory的方式,那吧router/index.js中的history换为createWebHistory()。router/index.js内容如下:

import { createRouter, createWebHistory } from "vue-router";
import Home from '@/views/TestHome.vue'
import Category from '@/views/TestCategory.vue'
const routes = [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/category', component: Category },
]const router = createRouter({history: createWebHistory(),routes, // short for `routes: routes`
})export default router

改完之后再访问http://locahost:8080，自动跳转到/home的路由，URL地址变为:http://localhost:8080/category。从形式上看就这个差异了。

6. 管理系统的路由尝试

首先管理系统的结构都是，进系统一个登录界面，然后跳转到一个主页面，左边导航，中间主区域就是变化的主要内容。根据这些需求，首先在App.vue这个入口中，应该保留一个router-view标签就OK了。主要用于展示两个路由一个是登录的，另外一个就是主界面。主界面中间区域搞个router-view。最后的造型应该就是如下所示：
router-规划布局

6.1 修改`App.vue`

<template><div><router-view></router-view></div>
</template>
<script>
</script>
<style>
</style>

6.2 创建`Portal.vue`

protal页面就是一个测试页面,内容如下

<template><div>Portal............</div>
</template><script>
export default {};
</script><style>
</style>

6.3 创建`Main.vue`

<template><div><el-container><el-header>Header</el-header><el-container><el-aside width="200px"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":router="true"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>Navigator One</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1" route="/portal">Portal</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item></el-menu></el-aside><el-main><router-view></router-view></el-main></el-container></el-container></div>
</template>
<script>
export default {};
</script>
<style scoped>
</style>

中间<el-main>里面route-view是主页填充内容区的路由区域。这里面用了el-menu,el-menu也可以直接用导航,但是需要打开导航所以加属性:router="true"，然后挑选了一个item来导航到Protal.
<el-menu-item index="1-1" route="/portal">Portal</el-menu-item>

6.4 建登录界面

创建Login.vue

<template><div class="login"><div class="login_form"><p>后台管理系统</p><el-form :model="loginForm" ref="loginForm"><el-form-item label="" prop="account"><el-inputtype="text"autocomplete="off"v-model="loginForm.account"prefix-icon="UserFilled"placeholder="请输入用户名"size="large"></el-input></el-form-item><el-form-item label="" prop="password"><el-inputtype="password"autocomplete="off"v-model="loginForm.password"prefix-icon="Lock"placeholder="请输入密码"size="large"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="onSubmit">登录</el-button><el-button>重置</el-button></el-form-item></el-form></div></div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const loginForm = reactive({account: "",password: "",
});
const router = useRouter();
function onSubmit() {router.push("/main");
}
</script>
<style scoped lang="less">
.login {width: 100%;height: 100vh;background-image: url("../assets/login/background.jpeg");background-size: 100% 100%;background-position: center center;overflow: auto;position: relative;.login_form {width: 400px;height: 360px;position: absolute;left: 78%;top: 50%;margin-left: -200px;margin-top: -150px;padding: 10px;background: #fff;border-radius: 10px;box-shadow: 0 0 10px #ddd;.btns {display: flex;justify-content: flex-end;}}p {font-size: 24px;text-align: center;font-weight: 600;}
}
</style>

这里用到了vue-router组件,在点击登录按钮的时候，直接通过router跳转到/main页面。这里要导入一下依赖

import { useRouter } from "vue-router";

6.4.1 安装`less`的模块

因为这里的样式我用的是less,所以要安装Less的两个工具包

安装less-loader

npm install less-loader

安装less

npm install less

6.4.2 安装`ElementPlus`的图标

这里直接就参照一下ElementPlus官网的的做法就好了。

6.4.3 登录页面效果

登录页面的效果

6.5 修改路由

src/router/index.js的内容修改为：

import { createRouter, createWebHistory } from "vue-router";
const routes = [{ path: '', redirect: '/login' },{ path: '/login', component: () => import('@/views/Login.vue') },{path: '/main',component: () => import('@/views/Main.vue'),children: [{ path: '/portal', component: () => import('@/views/Portal.vue') },]}
]
const router = createRouter({history: createWebHistory(),routes, // short for `routes: routes`
})
export default router