文章目录
参考
项目 | 描述 |
---|---|
搜索引擎 | Bing |
哔哩哔哩 | 黑马程序员 |
Vue Router | 官方教程 |
描述
项目 | 描述 |
---|---|
Edge | 109.0.1518.70 (正式版本) (64 位) |
操作系统 | Windows 10 专业版 |
@vue/cli | 5.0.8 |
npm | 8.19.3 |
VueJS | 2.6.14 |
Vue Router | 3.6.5 |
Vue Router
Vue Router 是 VueJS 官方提供的路由插件,使用该插件你将能更加便利的管理 VueJS 创建的单页面应用程序(Single Page Web Application,SPA)中的组件间的动态切换。
获取
npm
npm install vue-router
yarn
yarn add vue-router
依赖问题
vue-router 4.x 仅支持 vue-router 3.x 版本,但我使用的 VueJS 的版本号为 2.6.14,所以我将使用如下命令安装 vue-router 3.x:
npm install vue-router@3
请注意您使用的 vue-router 是否与使用的 VueJS 相匹配,如果不匹配你可能将在控制台中看到如下错误信息:
使用
router-link
router-link 元素为组件元素,该元素拥有 to 属性,你可以通过该元素定义路由,通过该元素中的 to 属性指定链接。
举个栗子
<router-link to="/Dodgerblue">Dodgerblue</router-link>
注:
你可以使用 a 元素代替 router-link 元素,但并不推荐这么做。使用 router-link 而不是 a 元素可以使你获得来自 vue-router 的更多帮助。
router-view
与路由匹配的组件将替换 router-view 元素。你可以把该元素放在任何位置以适应你的布局。
配置路由插件
如果你使用类似 Vue CLI 等类似工具构建了 Vue 项目,请在 src 路径下创建 router 文件夹,并在该文件夹中创建 index.js 文件,该文件将用于对路由插件进行配置。
基本结构
// 导入 VueJS
import Vue from 'vue';
// 导入 vue-router
import VueRouter from 'vue-router';
// 注册插件
Vue.use(VueRouter);
// 创建路由对象
const router = new VueRouter();
// 将路由对象进行导出
export default router;
子组件
在组件的动态切换的过程中,我们将使用到如下组件:
Doderblue.vue
<template>
<div class="box"></div>
</template>
<script>
export default {
}
</script>
<style scoped>
.box{
width: 150px;
height: 150px;
background-color: dodgerblue;
}
</style>
Pink.vue
<template>
<div class="box"></div>
</template>
<script>
export default {
}
</script>
<style scoped>
.box{
width: 150px;
height: 150px;
background-color: pink;
}
</style>
YellowGreen.vue
<template>
<div class="box"></div>
</template>
<script>
export default {
}
</script>
<style scoped>
.box{
width: 150px;
height: 150px;
background-color: yellowgreen;
}
</style>
导入需要进行路由匹配的组件
// 导入需要建立映射关系的路由
import Dodgerblue from '@/components/Dodgerblue.vue';
import Pink from '@/components/Pink.vue';
import YellowGreen from '@/components/YellowGreen.vue';
定义路由规则
我们需要为路由与组件建立映射规则,你可以通过如下方式进行路由规则的建立。
// 创建路由对象
const router = new VueRouter({
// 定义路由规则
routes: [
{path: '/Dodgerblue', component: Dodgerblue},
{path: '/Pink', component: Pink},
{path: '/YellowGreen', component: YellowGreen}
]
});
其中:
项目 | 描述 |
---|---|
path | 用于指定路由。 |
component | 用于指定与该路由建立映射关系的组件。 |
代码整合
vue-router 的配置文件中的内容最终如下:
// 导入 VueJS
import Vue from 'vue';
// 导入 vue-router
import VueRouter from 'vue-router';
// 注册插件
Vue.use(VueRouter);
// 导入需要建立映射关系的路由
import Dodgerblue from '@/components/Dodgerblue.vue';
import Pink from '@/components/Pink.vue';
import YellowGreen from '@/components/YellowGreen.vue';
// 创建路由对象
const router = new VueRouter({
// 定义路由规则
routes: [
{path: '/Dodgerblue', component: Dodgerblue},
{path: '/Pink', component: Pink},
{path: '/YellowGreen', component: YellowGreen}
]
});
// 将路由对象进行导出
export default router;
挂载路由
在对 vue-router 插件配置完成后,我们需要对该插件进行挂载。
import Vue from 'vue'
import App from './App.vue'
// 导入插件的配置文件 index.js
import Router from './router/index.js'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 对插件进行挂载
router: Router
}).$mount('#app')
注:
如果进行模块化导入时,指向的路径为一个文件夹,则将自动读取该文件夹下的 inde.js 文件。故可以通过如下方式 导入插件的配置文件 index.js 。
import Router from './router'
或:
import Router from './router/'
主逻辑
App.vue
<template>
<div class="container">
<div class="controller">
<!--
使用 router-link 元素定义路由,
该元素的 to 属性可用于指定链接。
-->
<router-link to="/Dodgerblue">Dodgerblue</router-link>
<router-link to="/Pink">Pink</router-link>
<router-link to="/YellowGreen">YellowGreen</router-link>
</div>
<!-- 与路由相匹配的组件将替代 router-view 元素 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
// 为 style 添加 scoped 属性
// 防止出现样式冲突问题。
<style scoped>
/* 使用深度选择器 >>> 选中组件中的 a 元素 */
>>> a{
text-decoration: none;
color: #fff;
font-size: 14px;
font-weight: 600;
display: inline-block;
width: 100px;
height: 30px;
background-color: #f40;
margin-right: 8px;
margin-bottom: 15px;
border-radius: 3px;
text-align: center;
line-height: 30px;
}
</style>
执行效果
重定向
从执行效果来看,在我们访问网站首页时访问的并不是首页链接 http://localhost:8080/,而是 http://localhost:8080/#/ 。
http://localhost:8080/#/ 是使用插件 vue-router 造成的结果。在使用该插件后,访问页面首页链接将自动进行跳转。
通过定义路由规则,我们也可以自定义路由的重定向功能。接下来,我们将通过定义路由规则使得访问首页后跳转到链接 http://localhost:8080/#/Dodgerblue。
请将路由插件配置文件 index.js 中的对应内容替换为如下内容
// 创建路由对象
const router = new VueRouter({
// 定义路由规则
routes: [
{path: '/Dodgerblue', component: Dodgerblue},
{path: '/Pink', component: Pink},
{path: '/YellowGreen', component: YellowGreen},
// 添加路由规则实现路由重定向功能
{path: '/', redirect: '/Dodgerblue'}
]
});
其中:
项目 | 描述 |
---|---|
path | 指定需要进行重定向的路径。 |
redirect | 指定重定向后需要跳转到的路径。 |
执行效果
更换相应内容后重新执行 Vue 项目,你将得到如下效果: