目录
往期列表
本章涵盖知识点
- Vue Router 的基本概念
- 路由的配置和使用
- 动态路由和嵌套路由
- 路由守卫
回顾
在第四篇文章中,我们详细探讨了 Vue 的计算属性和侦听器,以及生命周期钩子函数。我们a了解到计算属性如何基于它们的依赖进行缓存,侦听器如何帮助我们观察和响应 Vue 实例上的数据变化。
Vue Router 的基本概念
什么是 Vue Router?
Vue Router 是 Vue 官方的路由管理器
,用于构建单页面应用。它允许你通过 URL 来映射不同的组件,实现页面的动态加载和导航
。
为什么需要 Vue Router?
在现代 Web 应用中,用户期望页面能够快速响应,无需重新加载整个页面。Vue Router 通过前端路由解决了这个问题,它使得组件的切换变得无缝,提升了用户体验
。
路由的配置和使用
安装 Vue Router
首先,你需要安装 Vue Router:
bash
npm install vue-router
创建路由
在 Vue Router 中,路由是通过router.addRoute
方法配置的:
javascript
// router.js
import Vue from "vue";
import Router from "vue-router";
import Home from "@/components/Home";
import About from "@/components/About";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
],
});
在 Vue 实例中使用路由
javascript
// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
模板中的路由链接
在 Vue 模板中,你可以使用<router-link>
来创建导航链接:
html
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
动态路由和嵌套路由
动态路由
动态路由是指路由的某些部分是动态的,例如用户 ID 或文章的 slug:
javascript
{
path: '/user/:id',
name: 'User',
component: User
}
嵌套路由
Vue Router 支持嵌套路由,这使得你可以创建模块化的组件结构:
javascript
{
path: '/dashboard',
component: Dashboard,
children: [
{
path: 'posts',
component: Posts
},
{
path: 'users',
component: Users
}
]
}
路由守卫
什么是路由守卫?
路由守卫用于在路由跳转前后执行代码,可以用来检查用户认证状态、获取数据等。
全局路由守卫
javascript
router.beforeEach((to, from, next) => {
if (to.path === "/login" && isUserAuthenticated()) {
next({ path: "/" });
} else {
next();
}
});
组件内路由守卫
javascript
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
},
};
实例演示
创建一个简单的 SPA
我们将创建一个简单的单页面应用,包含首页、关于页和用户个人页。
-
安装 Vue Router:
bashnpm install vue-router
-
配置路由:
javascript// router.js import Vue from "vue"; import Router from "vue-router"; import Home from "@/components/Home"; import About from "@/components/About"; import User from "@/components/User"; Vue.use(Router); export default new Router({ mode: "history", routes: [ { path: "/", component: Home }, { path: "/about", component: About }, { path: "/user/:id", component: User }, ], });
-
在 Vue 实例中使用路由:
javascript// main.js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; new Vue({ router, render: (h) => h(App), }).$mount("#app");
-
模板中的路由链接:
html<!-- App.vue --> <template> <div id="app"> <router-link to="/" exact>Home</router-link> <router-link to="/about">About</router-link> <router-link to="/user/1">User 1</router-link> <router-view></router-view> </div> </template>
结语
通过本篇文章,我们学习了 Vue Router 的基本概念、配置和使用,以及如何实现动态路由和嵌套路由 。我们还探讨了路由守卫
的概念,并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。