单页面应用（SPA）是现代 web 应用中一种非常重要的应用模式。它可以提供流畅而无缝的用户体验，并可以提高应用性能。Vue.js 是当今最受欢迎的 JavaScript 框架之一，提供了一种非常方便的方式来构建 SPA。Vue 提供了一个名为 Vue Router 的包，可以方便地管理路由。
Vue Router 允许您将 URL 映射到组件，使得在 SPA 中导航变得非常流畅。本文将重点介绍 Vue Router 的一些关键特性，并深入了解 beforeEach 路由守卫功能。
路由基础
首先，我们需要安装和导入 Vue Router。假设我们的项目已经使用了 Vue CLI 并安装了 Vue Router，则可以按照以下步骤设置路由。
在 src/router/index.js 中：
// www.javascriptcn.com code example
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 Router 正常工作：
// www.javascriptcn.com code example
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>现在，您的应用程序应该已经可以正常工作。您可以通过以下方式浏览您的组件：
http://localhost:8080/ -> Home 组件 http://localhost:8080/about -> About 组件
命名路由
命名路由可以使编程更容易并使代码更易于阅读和维护。您可以在路由配置对象中使用 name 属性配置路由名称。例如：
// www.javascriptcn.com code example
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]然后，您可以使用以下方式在代码中进行导航：
<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'about' }">About</router-link>路由参数
有时，我们需要使用路由参数在多个组件之间传递数据。您可以在路由配置中使用 path 属性的占位符来定义这些参数。例如：
// www.javascriptcn.com code example
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about/:id',
name: 'about',
component: About
}
]现在，在您的 About 组件中，您可以通过 this.$route.params.id 访问 id 参数。
动态路由
有时，您需要将动态路由添加到 SPA 中。您可以在路由配置中使用 path 属性中的占位符来定义这些路由。例如：
// www.javascriptcn.com code example
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/user/:id',
name: 'user',
component: User
}
]现在，在您的 User 组件中，您可以通过 this.$route.params.id 访问 id 参数，该参数值可以在路由切换时进行更新。
路由守卫
Vue Router 提供了一种称为路由守卫的功能，可以在路由跳转前执行特定的代码。这可以让您执行一些有用的操作，例如发出警报、检查身份验证状态、跟踪用户行为等。在 Vue Router 中，每个路由可以有多个路由守卫。
Global beforeEach
守卫可以是全局的，也可以是仅适用于某个特定路由的。全局守卫钩子函数接收一个 to 和一个 from 对象，这些对象代表即将进入的和离开的路由。beforeEach 函数应该返回一个 boolean 值或一个 Promise。如果返回 false 或 resolve 为 false，则导航被取消。您可以通过以下方式在全局 beforeEach 中添加路由守卫：
router.beforeEach((to, from, next) => {
// 在这里添加你的代码
next()
})Route-specific beforeEach
路由特定的 beforeEach 函数需要添加到路由配置中的特定路由对象中。这些函数可以比全局函数更细粒度地控制路由跳转。只有当跳转到与特定路由匹配的路径时，这些函数才会执行。您可以像这样在特定路由上添加守卫：
// www.javascriptcn.com code example
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About,
beforeEnter: (to, from, next) => {
// 在这里添加你的代码
next()
}
}
]使用 beforeResolve 可以控制全局的守卫在 resolved 时被调用，例如：
router.beforeResolve((to, from, next) => {
// 在这里添加你的代码
next()
})示例代码
基本路由
// www.javascriptcn.com code example
// src/router/index.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({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/user/:id',
name: 'user',
component: User
}
]
})
// src/App.vue
<template>
<div id="app">
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'about' }">About</router-link> |
<router-link :to="{ name: 'user', params: { id: 1 } }">User 1</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>路由参数
// www.javascriptcn.com code example
// src/router/index.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/:id',
name: 'about',
component: About
}
]
})
// src/components/About.vue
<template>
<div>
<h1>About</h1>
<p>Id: {{ $route.params.id }}</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
// src/App.vue
<template>
<div id="app">
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'about', params: { id: 1 } }">About 1</router-link> |
<router-link :to="{ name: 'about', params: { id: 2 } }">About 2</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>beforeEach 守卫
// www.javascriptcn.com code example
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
let isAuthenticated = false
const requireAuth = (to, from, next) => {
if (!isAuthenticated) {
next({
path: '/',
query: { redirect: to.fullPath }
})
} else {
next()
}
}
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About,
beforeEnter: requireAuth
}
]
})
// src/components/Home.vue
<template>
<div>
<h1>Home</h1>
<button @click="isAuthenticated = true">Login</button>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
isAuthenticated: false
}
}
}
</script>
// src/components/About.vue
<template>
<div>
<h1>About</h1>
<p>Welcome to the About page</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
// src/App.vue
<template>
<div id="app">
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'about' }">About</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>通过以上实例的介绍，相信您已经对 Vue Router 的主要特性进行了深入了解。使用它可以轻松构建功能丰富、高性能的 SPA。尝试使用 beforeEach 守卫功能时，请确保谨慎审查您的代码，并仅在必要时将其添加到特定路由上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c504fb6e1fc40e36e34e4b