Vue Router（路由）

最新推荐文章于 2024-06-04 21:41:16 发布

她敲级凶的

最新推荐文章于 2024-06-04 21:41:16 发布

阅读量603

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52350720/article/details/138045702

版权

当涉及到构建现代化的单页应用程序时，Vue.js 的一项关键功能是 Vue Router。Vue Router 是 Vue.js 官方的路由管理器，它允许你在 Vue 应用程序中实现导航和路由控制。本文将详细介绍 Vue Router 的各个方面，包括其基本概念、核心功能和用法示例。

1. 什么是 Vue Router？

Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页应用程序（SPA）。它允许你在 Vue 应用中定义不同的页面和页面间的导航关系，同时提供了诸如路由参数、嵌套路由、路由导航守卫等高级功能，以便更好地控制用户的导航行为。

2. Vue Router 的核心概念

在深入了解 Vue Router 的用法之前，我们首先需要了解几个核心概念：

路由（Route）：指的是用户访问的特定页面，通常对应于应用程序中的一个组件。
路由器（Router）：Vue Router 实例，用于管理应用程序的路由。
路由表（Route Table）：定义了路由与组件之间的映射关系，告诉 Vue Router 在用户访问特定路径时应该加载哪个组件。
动态路由（Dynamic Route）：包含参数的路由，参数可以根据用户的输入动态变化，例如 /user/:id。
嵌套路由（Nested Route）：在路由之间存在父子关系，可以实现更复杂的页面结构，例如 /user 下的子路由 /user/profile。

3. Vue Router 的基本用法

接下来，我们将介绍如何在 Vue 应用中使用 Vue Router。

3.1 安装 Vue Router

首先，你需要通过 npm 或 yarn 安装 Vue Router：

npm install vue-router

或者

yarn add vue-router

3.2 创建路由器实例

在 Vue 应用程序的入口文件中，创建一个 Vue Router 实例，并将其挂载到根 Vue 实例上：

// main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 在这里定义你的路由表
  ]
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

3.3 定义路由表

在创建路由器实例时，通过 routes 选项定义应用程序的路由表。每个路由都是一个对象，包含 path、component 等属性，指定了路径与组件之间的映射关系。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User },
  { path: '*', component: NotFound }
];

3.4 使用路由

在 Vue 组件中，你可以通过组件实现页面间的导航，通过组件显示当前路径对应的组件。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    
    <router-view></router-view>
  </div>
</template>

3.5 路由参数

你可以在路由路径中使用参数，以实现动态路由。在组件中通过 $route.params 访问路由参数。

const routes = [
  { path: '/user/:id', component: User }
];

// User.vue
export default {
  mounted() {
    console.log(this.$route.params.id);
  }
};