vue router干什么用

Vue Router主要用于在Vue.js应用中管理和控制路由。 它是Vue.js的官方路由管理工具，通过它可以实现单页面应用（SPA）的多视图切换。1、定义和管理应用的路由；2、提供导航守卫控制导航行为；3、支持动态路由匹配；4、实现嵌套路由；5、提供导航钩子函数。 这些功能使得开发者可以轻松地创建复杂的应用结构，确保用户体验的流畅性和一致性。

一、定义和管理应用的路由

Vue Router允许开发者通过配置路由规则，定义应用的不同视图，并在应用启动时初始化路由。具体步骤如下：

安装Vue Router
```
npm install vue-router
```

定义路由

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');

使用路由

在组件中使用 <router-view> 来显示匹配的组件。

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

二、提供导航守卫控制导航行为

Vue Router提供多种导航守卫，可以在路由切换前后进行拦截和控制。这些守卫包括全局守卫、路由独享守卫和组件内守卫。

全局守卫

router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  if (to.path === '/about' && !loggedIn) {
    next('/');
  } else {
    next();
  }
});

路由独享守卫

const routes = [
  {
    path: '/about',
    component: About,
    beforeEnter: (to, from, next) => {
      // 路由级别的守卫
      if (loggedIn) {
        next();
      } else {
        next('/');
      }
    }
  }
];

组件内守卫

export default {
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 访问组件实例
    });
  }
};

三、支持动态路由匹配

动态路由匹配允许在路由路径中使用参数，从而能根据不同的参数渲染相应的组件。示例如下：

定义动态路由

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

获取路由参数

export default {
  created() {
    console.log(this.$route.params.id);
  }
};

四、实现嵌套路由

嵌套路由使得开发者可以在父路由中嵌入子路由，从而构建更复杂的视图结构。

定义嵌套路由

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

在组件中使用嵌套路由

<template>
  <div>
    <h2>User</h2>
    <router-link to="profile">Profile</router-link>
    <router-link to="posts">Posts</router-link>
    <router-view></router-view>
  </div>
</template>

五、提供导航钩子函数

Vue Router还提供了一系列导航钩子函数，用于在路由导航过程中执行特定操作，包括全局前置守卫、全局解析守卫、全局后置守卫、路由独享守卫和组件内守卫。

全局前置守卫

router.beforeEach((to, from, next) => {
  // 全局前置守卫逻辑
  next();
});

全局解析守卫

router.beforeResolve((to, from, next) => {
  // 全局解析守卫逻辑
  next();
});

全局后置守卫

router.afterEach((to, from) => {
  // 全局后置守卫逻辑
});