Vue Router如何安装与使用

目录

1. Vue Router简介
2. 安装Vue Router
3. 基本配置
4. 路由模式
5. 路由定义
6. 动态路由匹配
7. 嵌套路由
8. 编程式导航
9. 命名路由
10. 命名视图
11. 重定向和别名
12. 路由组件传参
13. 导航守卫
14. 路由元信息
15. 滚动行为
16. 懒加载
17. 总结

Vue Router简介

Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 核心深度集成，使得构建单页面应用（SPA）变得轻而易举。Vue Router 允许你通过不同的 URL 访问不同的组件，从而实现页面的切换和导航。

安装Vue Router

在使用 Vue Router 之前，你需要先安装它。你可以通过 npm 或 yarn 来安装 Vue Router。

使用 npm 安装

npm install vue-router

使用 yarn 安装

yarn add vue-router

安装完成后，你可以在项目中使用 Vue Router。

基本配置

在 Vue 项目中使用 Vue Router 的第一步是配置路由。你需要在项目的入口文件（通常是 main.js 或 main.ts）中进行配置。

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

在这个例子中，我们首先导入了 VueRouter 和两个组件 Home 和 About。然后，我们使用 Vue.use(VueRouter) 来安装 Vue Router。接着，我们定义了一个路由数组 routes，其中包含了两个路由：/ 和 /about。最后，我们创建了一个 VueRouter 实例，并将其传递给 Vue 实例。

路由模式

Vue Router 支持两种路由模式：hash 模式和 history 模式。

Hash 模式

Hash 模式是 Vue Router 的默认模式。它使用 URL 的 hash 部分（即 # 后面的部分）来模拟一个完整的 URL，而不会重新加载页面。

const router = new VueRouter({
  mode: 'hash',
  routes
});

History 模式

History 模式使用 HTML5 History API 来实现 URL 导航，而不需要 #。这种模式需要服务器的支持，以避免在刷新页面时出现 404 错误。

const router = new VueRouter({
  mode: 'history',
  routes
});

路由定义

在 Vue Router 中，路由是通过 routes 数组来定义的。每个路由都是一个对象，包含 path 和 component 属性。

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

路径参数

你可以使用路径参数来动态匹配路由。

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

在这个例子中，:id 是一个路径参数，它可以匹配任何值。你可以在组件中通过 this.$route.params.id 来访问这个参数。

通配符路由

你可以使用通配符 * 来匹配所有路径。

const routes = [
  { path: '*', component: NotFound }
];

这个路由会匹配所有未定义的路由，通常用于显示 404 页面。

动态路由匹配

动态路由匹配允许你根据不同的路径参数来渲染不同的组件。你可以使用路径参数来实现这一点。

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

在这个例子中，:id 是一个路径参数，它可以匹配任何值。你可以在组件中通过 this.$route.params.id 来访问这个参数。

响应路由参数的变化

当路由参数发生变化时，组件不会重新渲染。为了响应路由参数的变化，你可以使用 watch 来监听 $route 对象的变化。

export default {
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

嵌套路由

嵌套路由允许你在一个路由中嵌套另一个路由。你可以使用 children 属性来定义嵌套路由。

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

在这个例子中，/user/:id 路由下嵌套了两个子路由：profile 和 posts。当访问 /user/1/profile 时，UserProfile 组件会被渲染到 User 组件的 <router-view> 中。

编程式导航

除了使用 <router-link> 进行导航外，你还可以使用编程式导航。Vue Router 提供了 this.$router.push 和 this.$router.replace 方法来实现编程式导航。

push 方法

push 方法会将新的路由添加到历史记录中。

this.$router.push('/about');

你也可以传递一个对象：

this.$router.push({ path: '/about' });

replace 方法

replace 方法会替换当前的历史记录，而不是添加新的记录。

this.$router.replace('/about');

go 方法

go 方法允许你在历史记录中前进或后退。

this.$router.go(-1); // 后退一步
this.$router.go(1); // 前进一步

命名路由

你可以为路由定义一个名称，以便在编程式导航中使用。

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

在编程式导航中，你可以使用名称来导航：

this.$router.push({ name: 'user', params: { id: 123 } });

命名视图

命名视图允许你在同一个路由中渲染多个组件。你可以使用 components 属性来定义命名视图。

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      sidebar: Sidebar
    }
  }
];

在模板中，你可以使用 <router-view> 的 name 属性来指定要渲染的组件：

<router-view></router-view>
<router-view name="sidebar"></router-view>

重定向和别名

重定向

你可以使用 redirect 属性来实现路由重定向。

const routes = [
  { path: '/home', redirect: '/' }
];

在这个例子中，访问 /home 会被重定向到 /。

别名

你可以使用 alias 属性来为路由定义一个别名。

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

在这个例子中，访问 /home 会渲染 Home 组件，但 URL 仍然是 /home。

路由组件传参

你可以通过 props 属性将路由参数传递给组件。

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

在这个例子中，User 组件会接收到一个 id 属性，其值为路由参数 :id。

你还可以传递一个对象：

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

导航守卫

导航守卫允许你在路由导航过程中执行一些操作。Vue Router 提供了三种导航守卫：全局守卫、路由独享守卫和组件内守卫。

全局前置守卫

你可以使用 router.beforeEach 来注册一个全局前置守卫。

router.beforeEach((to, from, next) => {
  // 执行一些操作
  next();
});

全局后置钩子

你可以使用 router.afterEach 来注册一个全局后置钩子。

router.afterEach((to, from) => {
  // 执行一些操作
});

路由独享守卫

你可以在路由配置中定义 beforeEnter 守卫。

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeEnter: (to, from, next) => {
      // 执行一些操作
      next();
    }
  }
];

组件内守卫

你可以在组件内定义 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 守卫。

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    next();
  }
}

路由元信息

你可以使用 meta 属性来定义路由的元信息。

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

在导航守卫中，你可以访问 meta 信息：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 检查用户是否已登录
  }
  next();
});

滚动行为

你可以使用 scrollBehavior 方法来控制页面滚动行为。

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

在这个例子中，scrollBehavior 方法会在路由导航时调用。如果 savedPosition 存在，则返回到之前的位置；否则，滚动到页面顶部。

懒加载

你可以使用懒加载来延迟加载路由组件，从而提高应用的性能。

const User = () => import('./components/User.vue');

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

在这个例子中，User 组件会在访问 /user/:id 路由时才会被加载。

总结

Vue Router 是 Vue.js 官方提供的路由管理器，它与 Vue.js 核心深度集成，使得构建单页面应用变得轻而易举。通过本文的介绍，你应该已经掌握了 Vue Router 的基本使用方法，包括安装、配置、路由定义、动态路由匹配、嵌套路由、编程式导航、命名路由、命名视图、重定向和别名、路由组件传参、导航守卫、路由元信息、滚动行为和懒加载等。

希望本文对你理解和使用 Vue Router 有所帮助。如果你有任何问题或建议，欢迎在评论区留言。