Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 的核心深度集成,使得构建单页应用变得更加容易。在本文中,我们将探讨 Vue Router 的基本使用方法,包括路由定义、路由传参、路由导航等。
安装
在使用 Vue Router 之前,我们需要先安装它。可以通过 npm 或 yarn 安装:
npm install vue-router
或
yarn add vue-router
定义路由
在使用 Vue Router 时,我们需要先定义路由。定义路由可以通过创建一个路由实例,然后定义路由映射表的方式来完成。
路由映射表是一个对象,它将 URL 路径映射到组件。例如:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/user/:id', component: User }
]
})
在这个例子中,我们定义了三个路由。路径为 / 的路由对应的组件是 Home,路径为 /about 的路由对应的组件是 About,路径为 /user/:id 的路由对应的组件是 User。其中,:id 表示路由参数,它可以在组件中通过 this.$route.params.id 访问到。
路由传参
在某些情况下,我们需要将一些参数传递给路由,以便在组件中使用。可以通过在 URL 中添加参数的方式来实现。
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
// 在组件中使用
<template>
<div>
<p>User ID: {{ $route.params.id }}</p>
</div>
</template>
// 导航到带有参数的路由
<router-link :to="'/user/' + userId">User</router-link>
在这个例子中,我们将用户 ID 作为路由参数传递给了路由组件 User。在组件中,可以通过 $route.params.id 访问到这个参数。在导航时,我们使用了路由链接 组件,通过动态绑定 to 属性来指定要导航到的路由。
路由导航
在 Vue Router 中,路由导航有两种方式:声明式导航和编程式导航。
声明式导航
声明式导航可以通过 Vue.js 提供的组件 来实现。这种方式相对简单,只需要在模板中使用 组件即可。
<router-link to="/about">About</router-link>
编程式导航
编程式导航可以通过调用 $router.push 或 $router.replace 方法来实现。这种方式需要在 JavaScript 中进行操作,通常在组件中使用。例如:
// 导航到指定路径
this.$router.push('/about')
// 导航到指定路由对象
this.$router.push({ path: '/about' })
// 带有参数的导航
this.$router.push({ path: '/user', params: { id: 123 } })
// 替换当前路由,而不是添加新的历史记录
this.$router.replace('/about')
在这个例子中,我们调用了 $router.push 方法来进行导航。可以传递一个路径字符串或路由对象作为参数。如果需要在导航时传递参数,可以将参数添加到路由对象的 params 属性中。另外,如果需要替换当前路由而不是添加新的历史记录,可以使用 $router.replace 方法。
路由守卫
在 Vue Router 中,路由守卫可以用来在导航到某个路由前后执行一些逻辑,例如检查用户权限、验证用户身份等。Vue Router 提供了多个路由守卫,包括全局守卫、路由独享守卫和组件内守卫等。
全局守卫
全局守卫可以在整个应用程序中使用,它们会影响所有路由。可以通过在路由实例上定义 beforeEach、beforeResolve 和 afterEach 方法来实现。
const router = new VueRouter({
routes: [...],
})
router.beforeEach((to, from, next) => {
// 在导航到每个路由前执行
next()
})
router.beforeResolve((to, from, next) => {
// 在解析路由组件前执行
next()
})
router.afterEach((to, from) => {
// 在导航完成后执行
})
在这个例子中,我们定义了三个全局守卫,分别是 beforeEach、beforeResolve 和 afterEach。这些守卫接收三个参数:要导航的目标路由对象、当前路由对象和一个 next 回调函数。next 回调函数用于控制路由的导航,可以传递一个参数来指定要导航到的路由,也可以不传递参数表示继续导航到目标路由。
路由独享守卫
路由独享守卫可以在某个路由上单独定义,只会影响该路由及其子路由。可以在路由对象上定义 beforeEnter 方法来实现。
const router = new VueRouter({
routes: [
{
path: '/about',
component: About,
beforeEnter: (to, from, next) => {
// 在导航到该路由前执行
next()
}
}
]
})
在这个例子中,我们在路由对象上定义了 beforeEnter 方法,它会在导航到该路由前执行。这个方法和全局守卫的参数和用法是一样的。
组件内守卫
组件内守卫可以在某个组件内部定义,只会影响该组件的路由。可以在组件中定义 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 方法来实现。
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在进入该路由前执行
next()
},
beforeRouteUpdate(to, from, next) {
// 在当前路由更新时执行
next()
},
beforeRouteLeave(to, from, next) {
// 在离开该路由前执行
next()
}
}
在这个例子中,我们在组件中定义了 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 方法。这些方法和全局守卫的参数和用法是一样的。
示例代码
下面是一个简单的示例,演示了如何使用 Vue Router 实现基本的路由功能和路由守卫。首先,我们需要在 index.html 中引入 Vue 和 Vue Router:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Router 示例</title>
</head>
<body>
<div id="app">
<h1>Vue Router 示例</h1>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="app.js"></script>
</body>
</html>
然后,我们需要在 app.js 中定义路由和路由守卫:
const Home = { template: '<div>首页</div>' }
const About = { template: '<div>关于我们</div>' }
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
router.beforeEach((to, from, next) => {
// 模拟异步操作
setTimeout(() => {
console.log(`从 ${from.path} 导航到 ${to.path}`)
next()
}, 1000)
})
const app = new Vue({
el: '#app',
router,
})
在这个示例中,我们定义了两个组件 Home 和 About,并将它们与路径 / 和 /about 对应起来。然后,我们定义了一个全局守卫,在每次导航前都会打印出从哪个路由导航到哪个路由。最后,我们将路由实例添加到 Vue 实例中,并挂载到页面上的 #app 元素上。
现在,我们就可以在浏览器中运行这个示例,看看路由和路由守卫的效果了。