【Vue.js进阶】Vue Router:构建单页应用的路由系统
Vue.js进阶系列文章导航
【Vue.js进阶】1、深入响应式原理
【Vue.js进阶】2、Vue Router:构建单页应用的路由系统(本文)
【Vue.js进阶】3、Vuex:状态管理的最佳实践
【Vue.js进阶】4、组合式API:使用 Composition API 构建复杂组件
【Vue.js进阶】5、插件与自定义指令
【Vue.js进阶】6、单元测试与端到端测试
【Vue.js进阶】7、性能优化:提升你的 Vue 应用速度
【Vue.js进阶】8、服务端渲染(SSR)与 Nuxt.js 简介
【Vue.js进阶】9、国际化:多语言支持
【Vue.js进阶】10、与第三方库的集成:Axios、Lodash等
在本篇文章中,我们将详细介绍如何使用 Vue Router 来构建单页应用(SPA)。Vue Router 是 Vue.js 官方的路由管理器,提供了丰富的功能来帮助我们管理应用中的路由和导航。我们将从基本概念开始,逐步深入,最终构建一个简单的单页应用示例。
1. Vue Router 概述
Vue Router 是 Vue.js 官方的路由库,用于构建单页应用(SPA)。它允许我们定义多个视图,每个视图对应一个路径,并且路径之间可以自由切换而无需刷新页面。
核心概念
- 路由(Route):定义路径和组件的映射关系。
- 路由器(Router):管理路由和视图之间的切换。
2. 安装 Vue Router
首先,我们需要安装 Vue Router。你可以使用 Vue CLI 创建一个包含 Vue Router 的项目,或者手动添加 Vue Router。
使用 Vue CLI 创建项目
vue create my-vue-app
cd my-vue-app
vue add router
手动安装
如果你已经有一个 Vue 项目,可以通过 npm 或 yarn 安装 Vue Router:
npm install vue-router
# 或者
yarn add vue-router
3. 配置 Vue Router
安装完成后,我们需要在项目中配置路由器。
创建路由配置
在 src
目录下创建一个 router
文件夹,并在其中创建 index.js
文件:
// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;
在主应用中使用路由器
编辑 src/main.js
文件,将路由器添加到 Vue 实例中:
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
4. 定义视图组件
在 src/views
目录下创建两个视图组件:Home.vue
和 About.vue
。
Home.vue
<template>
<div>
<h1>Home</h1>
<p>Welcome to the Home page!</p>
</div>
</template>
<script>
export default {
name: 'Home'
};
</script>
About.vue
<template>
<div>
<h1>About</h1>
<p>This is the About page.</p>
</div>
</template>
<script>
export default {
name: 'About'
};
</script>
5. 添加导航链接
在 src/App.vue
文件中添加导航链接和路由视图:
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
nav {
margin-bottom: 1em;
}
router-link {
margin-right: 1em;
}
</style>
6. 高级用法
动态路由匹配
Vue Router 支持动态路由匹配。你可以在路径中使用动态参数:
const routes = [
{
path: '/user/:id',
name: 'User',
component: () => import('../views/User.vue')
}
];
在组件中,你可以通过 this.$route.params
访问路由参数:
<template>
<div>
<h1>User {{ userId }}</h1>
</div>
</template>
<script>
export default {
name: 'User',
computed: {
userId() {
return this.$route.params.id;
}
}
};
</script>
路由守卫
Vue Router 提供了多种导航守卫,允许你在导航前后执行逻辑。常见的守卫有全局守卫、路由独享守卫和组件内守卫。
全局守卫
router.beforeEach((to, from, next) => {
// 执行一些逻辑
next();
});
路由独享守卫
const routes = [
{
path: '/about',
name: 'About',
component: About,
beforeEnter: (to, from, next) => {
// 执行一些逻辑
next();
}
}
];
组件内守卫
export default {
name: 'About',
beforeRouteEnter(to, from, next) {
// 在进入路由前执行
next();
},
beforeRouteUpdate(to, from, next) {
// 在当前路由变化但组件被复用时调用
next();
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
next();
}
};
7. 小结
通过本篇文章,我们了解了如何使用 Vue Router 创建一个简单的单页应用,并探索了一些高级用法。Vue Router 强大的功能和灵活的 API 使得我们可以轻松地管理应用中的路由和导航。
在下一篇文章中,我们将探讨 Vuex,了解如何在 Vue 应用中进行状态管理。敬请期待!
这里是爪磕~感谢您的到来与关注,持续为您带来高质教学!Happy coding! 🎉