Vue 路由

Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 核心深度集成，允许开发者通过简单的配置来构建单页面应用 (SPA)，并且提供了诸如路由参数、嵌套路由、命名路由等高级功能。下面是关于 Vue Router 的基本介绍和用法：

安装和基本用法

安装 Vue Router

首先确保你的 Vue 项目中已经安装了 Vue.js（使用 vue create 或者其他方式），然后安装 Vue Router：

npm install vue-router
# 或者
yarn add vue-router

在项目中使用 Vue Router

在 Vue 项目中使用 Vue Router 需要先创建一个路由实例，并将其与根组件挂载：

// main.js 或者 App.vue 中
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(VueRouter);
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
const router = new VueRouter({
  routes
});
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

基本的路由配置

在上述示例中，我们创建了两个简单的路由：/ 和 /about，分别指向 Home 和 About 组件。每个路由都定义了一个 path 和相应的 component。

Router-View 和 Router-Link

在 Vue Router 中，使用 <router-view> 组件来显示匹配到的组件，使用 <router-link> 组件来导航到不同的路由。

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
};
</script>

动态路由匹配

Vue Router 允许你定义动态路由，例如从路径中提取参数并传递给组件使用：

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

在组件中通过 $route.params 可以访问到动态路由中的参数：

<!-- User.vue -->
<template>
  <div>User {{ $route.params.username }}</div>
</template>
<script>
export default {
  name: 'User'
};
</script>

嵌套路由

Vue Router 支持嵌套路由，允许在组件内部定义子路由：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: '', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
];

命名路由

你可以为路由配置命名，方便在代码中进行跳转或者获取路由信息：

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

在代码中使用命名路由：

<router-link :to="{ name: 'user', params: { id: userId }}">User Profile</router-link>

导航守卫

Vue Router 提供了导航守卫，允许你在路由发生变化前后执行逻辑，例如验证权限、取消导航等操作：

router.beforeEach((to, from, next) => {
  // 可以在这里执行权限验证等操作
  next();
});

总结

Vue Router 是 Vue.js 中管理路由的核心库，通过定义路由、嵌套路由、命名路由等功能，帮助开发者构建单页面应用（SPA）并进行页面间的导航控制。以上是 Vue Router 的基本介绍和常见用法，希望对你有所帮助！