Vue.js 中的路由（Route）跳转

Vue.js 中的路由

在这里插入图片描述

官方解释

在 Vue.js 中，路由是一种用于导航和页面跳转的重要概念。Vue 提供了一个名为 Vue Router 的官方插件，用于构建单页面应用程序（SPA）的路由系统。Vue Router 允许您将不同的组件映射到应用程序的不同 URL，这样用户可以通过浏览器的前进和后退按钮或直接输入 URL 来导航到不同的视图。

Vue Router 提供了以下关键功能：

路由映射: 将 URL 映射到 Vue 组件，使用户可以通过不同的 URL 访问不同的页面或视图。
嵌套路由: 支持嵌套路由，您可以将多个路由配置嵌套到父路由中，以构建复杂的页面结构。
路由参数: 支持动态路由参数，使您可以在路由中传递参数，以便根据不同的参数值显示不同的内容。
路由导航守卫: 提供了路由导航守卫，允许您在路由跳转前后执行一些逻辑，例如验证用户权限或执行数据加载。

通俗解释

想象一下，您正在使用互联网浏览器访问不同的网页。每当您在浏览器中输入一个 URL 或点击链接时，浏览器会加载相应的页面，这就是浏览器的路由系统在工作。类似地，Vue.js 中的路由系统允许您在单页应用程序中切换不同的视图，就像在浏览器中导航到不同的网页一样。

举个例子，假设您正在构建一个在线商店的单页应用程序。您可以使用 Vue Router 来定义不同的页面，如首页、产品列表页、产品详情页、购物车等。每个页面对应一个 Vue 组件，Vue Router 将 URL 映射到这些组件，使用户可以通过点击链接或输入特定的 URL 来访问不同的页面。这样，用户可以在不刷新整个页面的情况下浏览不同的部分，就像在真实的商店中逛街一样。

路由的实现方法

在 Vue.js 中，您可以使用 Vue Router 来实现路由。以下是一些关于 Vue Router 的详细介绍和示例：

1. 安装 Vue Router

首先，您需要安装 Vue Router。您可以使用 npm 或 yarn 来安装它：

npm install vue-router

或者

yarn add vue-router

2. 创建 Vue Router 实例

在您的 Vue.js 应用程序中，需要创建一个 Vue Router 实例并将其与应用程序关联。通常，这是在应用程序的入口文件中完成的。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    
    
  routes: [
    // 定义路由规则
    {
    
    
      path: '/',
      component: Home // 与 Home 组件关联
    },
    {
    
    
      path: '/products',
      component: Products // 与 Products 组件关联
    },
    // ...其他路由规则
  ]
})

3. 创建路由对应的组件

在上述示例中，我们定义了两个路由规则，分别与 Home 组件和 Products 组件关联。现在，您需要创建这些组件：

// Home.vue
<template>
  <div>
    <h1>Home Page</h1>
    <!-- Home 页面内容 -->
  </div>
</template>

// Products.vue
<template>
  <div>
    <h1>Products Page</h1>
    <!-- Products 页面内容 -->
  </div>
</template>

4. 在模板中使用路由链接

要在您的应用程序中使用路由，您可以在模板中使用 <router-link> 元素来创建链接，以便用户可以导航到不同的页面。例如：

<router-link to="/">Home</router-link>
<router-link to="/products">Products</router-link>

5. 渲染路由视图

在您的应用程序布局中，您可以使用 <router-view> 元素来渲染当前路由对应的组件。例如：

<template>
  <div>
    <h1>My Vue.js App</h1>
    <router-view></router-view>
  </div>
</template>

这样，当用户点击链接时，<router-view> 会自动渲染与当前路由匹配的组件，从而实现页面切换效果。

这只是 Vue Router 的基础用法。除了使用Vue Router提供的基本路由导航方式，还有其他一些常见的路由跳转方式，以下是其中一些介绍和示例：

1. 编程式导航

编程式导航是通过JavaScript代码来实现路由跳转的方式。您可以在Vue组件的方法中使用this.$router对象来导航到不同的路由。

示例：在一个按钮的点击事件处理程序中进行编程式导航。

<template>
  <div>
    <button @click="navigateToHome">Go to Home</button>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    navigateToHome() {
      
      
      // 编程式导航到"/"路由
      this.$router.push('/');
    }
  }
}
</script>

2. 命名路由

Vue Router允许您为路由设置名称，并通过名称进行导航。这对于在应用程序中导航到具体的路由非常有用。

示例：在路由配置中设置命名路由并使用名称进行导航。

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      component: Home,
      name: 'home'
    },
    {
    
    
      path: '/products',
      component: Products,
      name: 'products'
    }
  ]
});

在组件中使用命名路由进行导航：

<template>
  <div>
    <router-link :to="{ name: 'home' }">Go to Home</router-link>
    <router-link :to="{ name: 'products' }">Go to Products</router-link>
  </div>
</template>

3. 重定向

重定向允许您将一个路由重定向到另一个路由。这在需要将用户引导到默认页面或旧页面时非常有用。

示例：将"/“路由重定向到”/home"路由。

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      redirect: '/home'
    },
    {
    
    
      path: '/home',
      component: Home
    }
  ]
});

4. 路由别名

路由别名允许您为一个路由设置多个路径，这样用户可以通过不同的路径访问相同的页面。

示例：为"/home"路由设置别名"/welcome"。

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/home',
      component: Home,
      alias: '/welcome'
    }
  ]
});

Vue Router提供了灵活的导航选项，以适应不同的导航需求。根据您的应用程序的具体要求，您可以选择适合的导航方式。无论是编程式导航、命名路由、重定向还是路由别名，都可以帮助您构建具有良好导航体验的Vue.js应用程序。这样相对于传统的html而言，路由的出现不用老在各个页面之间来回串，导致数据传输很难受！当然，我们这里只是介绍了路由的使用，对于路由传参我们后面会进行更加详细的介绍与学习，我将进行更深层次的理解，期待给大家带来会更好的阅读效果与知识积累！！！