VueJS - 路由：Vue 应用程序导航初学者指南
你好，未来的Vue大师们！今天，我们将踏上一段激动人心的旅程，探索Vue路由的世界。想象路由是您Vue应用程序的GPS - 它帮助用户在不重新加载整个网站的情况下，从一个页面导航到另一个页面。酷吧？让我们开始吧！
Vue路由是什么？
想象您正在建造一栋房子（您的Vue应用程序）。您不会希望您的客人每次想要去不同的房间时都从窗户进入，对吧？这就是路由的用武之地 - 它就像在您的应用程序的房间之间创建适当的门。
Vue Router是Vue.js的官方路由库。它允许您将组件映射到不同的URL路径，从而创建一个流畅的单页应用程序体验。
设置Vue Router
首先，让我们安装Vue Router。打开您的终端并运行：
npm install vue-router现在，让我们创建一个基本的路由设置：
// 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({
routes
})
export default router在这个设置中，我们导入了Vue和VueRouter，然后告诉Vue使用VueRouter。我们在数组中定义我们的路由，其中每个路由都是一个对象，指定路径、名称和要渲染的组件。
使用Router-Link和Router-View
现在我们有了路由设置，我们该如何使用它们呢？请使用<router-link>和<router-view>。
Router-Link
<router-link>是一个组件，允许用户在页面之间导航。它就像一个超级增强版的<a>标签。下面是如何使用它的方法：
<template>
<div id="app">
<nav>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</nav>
<router-view/>
</div>
</template>Router-View
<router-view>是魔法发生的地方。它是一个组件，用于显示与当前URL匹配的路由的内容。把它想象成一个占位符，您的组件将被渲染在这里。
Router-Link的Props
Router-Link带有几个props，允许您自定义其行为。让我们看看一些最常见的内容：
| Prop | 描述 | 示例 |
|---|---|---|
| to | 指定目标路由 | <router-link to="/about">关于</router-link> |
| replace | 导航时不推送新的历史记录条目 | <router-link to="/about" replace>关于</router-link> |
| append | 将路径附加到当前路径 | <router-link to="child" append>子页面</router-link> |
| tag | 指定渲染组件的标签 | <router-link to="/about" tag="li">关于</router-link> |
| active-class | 当链接处于活动状态时应用的类 | <router-link to="/about" active-class="active">关于</router-link> |
| exact | 完全匹配路由 | <router-link to="/" exact>首页</router-link> |
编程式导航
有时，您可能想要在JavaScript代码中导航。Vue Router为此提供了方法：
// 导航到关于页面
this.$router.push('/about')
// 返回
this.$router.go(-1)
// 替换当前历史记录条目
this.$router.replace('/about')动态路由匹配
通常，我们需要将具有相同组件但不同参数的路由映射。例如，一个用户资料页面，其中用户ID是URL的一部分。我们可以通过在路径中使用动态片段来实现：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})在这个例子中，:id是动态片段。您可以在组件中通过this.$route.params.id访问它。
嵌套路由
随着应用程序的增长，您可能想要在一个组件内嵌套另一个组件。Vue Router让这变得简单：
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})这个设置允许有如/user/123/profile和/user/123/posts这样的URL。
导航守卫
最后但同样重要的是，让我们来谈谈导航守卫。这些是由Vue Router提供的钩子，用于通过重定向或取消来守卫导航。它们就像应用程序的保镖，控制谁可以进入，谁不可以。
下面是一个全局前置守卫的简单示例：
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})这个守卫检查用户是否经过验证，然后才允许导航到除了'Login'之外的任何路由。
就是这样，各位！我们已经完成了Vue路由基础知识的旅程，从设置路由到保护它们。记住，熟能生巧，所以不要害怕在您自己的项目中尝试这些概念。快乐编码，愿您的路由总是引导您到达想去的地方！
Credits: Image by storyset