vue中指哪到哪的Router

前言、为何路由如此重要？

在单页面应用 SPA 的世界里，用户界面的流畅性至关重要。想象一下，当我们浏览网站时，每次点击链接都需要等待整个页面重新加载，这无疑是糟糕的用户体验。幸运的是，Vue Router 为我们提供了一种优雅的解决方案，它不仅让页面切换变得迅速，还保持了URL的友好性，让SEO优化也变得更加容易。接下来，让我们一起探索Vue Router是如何实现这一切的。

一、安装 Vue Router

在Vite环境下搭建Vue 3项目，我们首先要做的就是安装Vue Router。不同于传统的构建工具，Vite提供了更快的启动速度和高效的热更新，这让我们在开发过程中能够享受到丝滑般的体验。只需一行命令，Vue Router便能轻松集成到你的项目中。

npm install vue-router@next
或者
yarn add vue-router@next

安装完毕后，下一步就是在项目中配置路由。这涉及到定义我们的应用中所有可能的路径及其对应的组件。

二、配置 Vue Router

现在，让我们回到Vite项目中的src/router/index.js或index.ts文件。在这里，可以看到一个数组，它包含了所有可用的路由。每个路由都包含了一个path属性，用来匹配URL中的路径，以及一个component属性，指向与该路径关联的Vue组件。

例如，一个简单的主页路由可能如下所示：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

三、注册 Vue Router

在 main.js 文件中，我们需要导入并使用 Vue Router。这一步非常重要，因为没有这一步，我们的路由将不会生效。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

但是，这只是一个开始。为了实现复杂的导航逻辑，我们还需要深入了解如何使用<router-link>和<router-view>，以及如何处理动态路由和嵌套路由。

四、使用 <router-link> 和 <router-view>

在Vue应用中，<router-link>和<router-view>是两个不可或缺的组件。<router-link>用于创建可点击的链接，当用户点击时，它会导航到新的路径。而<router-view>则是一个占位符，用于显示与当前路由相匹配的组件。这两个组件的协同工作，使得我们在不刷新页面的情况下就能看到页面内容的变化，从而实现了SPA的基本功能。

<!-- 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>

五、动态路由和参数传递

动态路由是Vue Router中一项强大的特性，它允许我们在URL中使用变量。例如，我们可以创建一个博客文章的详情页，URL 可以像这样：/blog/:id。其中 :id 就是一个动态的部分，表示每篇文章的唯一标识符。当我们通过编程式导航或链接跳转到这个路径时，Vue Router会自动捕获这个动态部分，并将其作为参数传递给目标组件。

在 src/router/index.js 中，可以这样定义动态路由：

const routes = [
  // ...
  {
    path: '/blog/:id',
    name: 'blogPost',
    component: BlogPost,
  },
];

然后，在我们的组件中，可以使用 this.$route.params.id 或者在组合式 API 中使用 useRoute().params.id 来访问这个动态参数。

六、嵌套路由

随着应用规模的扩大，我们可能需要在某些页面内部添加更多的导航选项。这时候，嵌套路由就派上了用场。它允许我们在一个父级路由下定义多个子级路由，形成树状的路由结构。

例如，你可以有一个 /users 页面，它下面又有每个用户的个人页面，如 /users/:userId/posts。你可以在路由配置中使用嵌套结构来实现这一点：

const routes = [
  // ...
  {
    path: '/users',
    name: 'users',
    component: UsersIndex,
    children: [
      {
        path: ':userId/posts',
        name: 'userPosts',
        component: UserPosts,
      },
    ],
  },
];

七、利用路由守卫

路由守卫是在路由跳转前后执行某些逻辑的机制。Vue Router提供了多��类型的守卫，包括全局守卫、路由独享守卫和组件内的守卫。这些守卫可以用于权限检查、数据预加载等场景。

组件内的守卫：

• beforeRouteEnter：在组件实例被创建之前执行，不能访问this。
• beforeRouteUpdate：在当前路由改变，但组件被复用时调用。
• beforeRouteLeave：在离开当前路由之前调用，可以用于阻止导航或确认操作。

在组件中使用beforeRouteEnter守卫预加载数据。

Javascript
深色版本
1export default {
2  beforeRouteEnter(to, from, next) {
3    next(vm => vm.fetchData());
4  },
5  methods: {
6    fetchData() {
7      // 在这里执行数据预加载逻辑
8    }
9  }
10};

八、编程式导航

编程式导航允许你通过JavaScript代码来控制导航，而不是使用<router-link>标签。这在处理异步操作或响应用户交互时非常有用。

1、使用 $router.push 和 $router.replace

// 导航到一个命名的路由
this.$router.push({ name: 'user', params: { userId: '1' } });

// 导航到一个带有查询参数的路径
this.$router.push({ path: '/search', query: { q: 'query string' } });

// 替换当前历史记录条目
this.$router.replace('/another-page');

// 回退或前进
this.$router.go(-1); // 后退
this.$router.go(1);  // 前进

2、使用 this.$route 对象

在组件内部，你可以通过this.$route对象访问当前路由的信息，包括参数、查询和完整路径等。

在组件中进行编程式导航：

methods: {
  navigateToProfile() {
    this.$router.push({ name: 'profile' });
  }
}

通过上述方法，我们可以有效地在Vue应用中管理和控制路由行为，实现更复杂和定制化的导航逻辑。

总结、驾驭Vue Router

从简单的静态路由到复杂的动态和嵌套路由，Vue Router为我们提供了一整套丰富的工具，帮助我们构建出既美观又高效的单页面应用。看到这，希望这能帮助你更深入地理解 Vue Router 的工作原理，并能在实际项目中灵活运用！一起加油。