vue2技能树（11）-路由安装与基本配置、路由导航、嵌套路由

---

点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

路由安装与基本配置

Vue.js 2 使用 Vue Router 来实现路由功能，它允许你构建单页面应用程序并在不同页面之间进行导航。在本文中，我们将详细介绍如何安装和进行基本配置 Vue Router，同时提供一个详细的项目示例来演示它的用法。

安装 Vue Router

首先，你需要安装 Vue Router 来添加路由功能到你的 Vue.js 2 项目。

使用 npm 或 yarn 安装 Vue Router：

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

配置 Vue Router

一旦安装了 Vue Router，你需要进行基本的配置。

在你的应用程序中创建一个 router.js 文件，用于配置路由：

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

Vue.use(VueRouter);

const routes = [
  // 在这里定义你的路由
];

const router = new VueRouter({
  routes
});

export default router;

在 routes 数组中，你可以定义你的路由，每个路由都由一个 path 和一个 component 组成。path 是路由的 URL，component 是将在该路由下渲染的 Vue 组件。

创建 Vue 组件

在你的项目中创建对应的 Vue 组件，这些组件将在不同的路由下显示。

例如，创建一个名为 Home.vue 的组件：

在应用程序中使用 Vue Router

现在，你需要将 Vue Router 配置与你的应用程序相连接。

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

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

在这个示例中，我们将 router 对象添加到 Vue 实例中，并将其与根组件 App 相连接。这样，Vue Router 就能管理整个应用程序的导航。

在应用中定义路由

在之前创建的 router.js 文件中，你可以定义路由。以下是一个基本的配置示例：

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

const router = new VueRouter({
  routes,
});

export default router;

在这个示例中，我们定义了三个基本路由，分别是首页（‘/’）、关于页面（‘/about’）和联系页面（‘/contact’）。每个路由都有一个对应的 Vue 组件。

创建路由视图

在应用程序的模板中，你需要添加一个 标签，它将用于显示当前路由下的组件。

完整的项目示例

以下是一个完整的项目示例，演示了如何安装、配置和使用 Vue Router 来创建一个具有多个页面的单页面应用程序：

// App.vue

// Home.vue

// About.vue

// Contact.vue

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
import Contact from './views/Contact.vue';

Vue.use(VueRouter);

const

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

const router = new VueRouter({
  routes,
});

export default router;

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

在这个示例中，我们创建了一个具有首页、关于页面和联系页面的简单单页面应用程序，并使用 Vue Router 进行导航。router.js 配置了路由，App.vue 中使用 标签来显示当前路由下的组件。这是一个基本的 Vue Router 配置和使用示例。

路由导航详解

Vue Router提供了多种导航方法，用于在单页应用中实现路由导航、跳转和浏览。以下是对Vue 2导航的多方面详细介绍，包括使用详细的项目示例。

基本导航

Vue Router 是 Vue.js 2 中官方的路由管理库，它提供了多种导航方法来实现路由跳转。下面是一些基本的导航方法：

通过路由链接

是Vue Router提供的组件，用于创建导航链接。它会自动根据路由配置生成链接，并可以设置to属性来指定导航目标。

项目示例

<template>
  <div>
    <router-link to="/home">首页router-link>
    <router-link to="/about">关于我们router-link>
  div>
template>

在这个示例中， 组件创建了两个导航链接，分别导航到/home和/about页面。

编程式导航

你也可以使用编程式导航，通过路由对象在JavaScript中进行路由跳转。

项目示例

methods: {
  navigateToHome() {
    this.$router.push('/home');
  },
  navigateToAbout() {
    this.$router.push('/about');
  }
}

在这个示例中，我们定义了两个方法，navigateToHome 和 navigateToAbout，通过this.$router.push()方法来进行编程式导航。

嵌套路由导航

在Vue Router中，你可以创建嵌套路由，包括父子关系的路由。当你需要在子路由中进行导航时，可以使用相对路径。

项目示例

假设你有一个父子路由结构，如下所示：

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About, children: [
      { path: 'team', component: Team },
      { path: 'contact', component: Contact }
    ]}
  ]
})

在这个示例中，/about/team 和 /about/contact 是相对于父路由/about的路径。你可以通过编程式导航或创建导航链接。

路由参数

有时，你需要在导航链接中传递参数，以便根据参数显示不同的内容。

项目示例

<template>
  <div>
    <router-link :to="{ name: 'user', params: { id: 1 }}">用户1router-link>
    <router-link :to="{ name: 'user', params: { id: 2 }}">用户2router-link>
  div>
template>

在这个示例中，我们使用 组件，通过to属性传递了用户的ID参数。

命名路由

Vue Router允许你为路由起一个名字，以便在导航中更容易识别和使用。

项目示例

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

在这个示例中，我们为两个路由分别起了名字home和about，以便在导航中使用。

导航守卫

Vue Router提供了导航守卫，可以在导航发生前、发生时、发生后执行特定的操作。这些守卫包括beforeEach、beforeResolve、afterEach等。

项目示例

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 执行某些操作，如身份验证
  if (to.path === '/about' && !isLoggedIn) {
    next('/');
  } else {
    next();
  }
})

在这个示例中，我们添加了一个全局前置守卫，用于在导航到/about页面时进行身份验证。

Vue Router提供了丰富的导航功能，使你能够在Vue.js应用中实现页面间的导航、路由参数传递、嵌套路由等。根据项目需求，你可以选择不同的导航方法，以构建强大的单页面应用。

嵌套路由详解

Vue.js 2 中的嵌套路由允许你在一个父路由内包含子路由，创建复杂的页面结构和导航层次。在这里，我们将详细介绍Vue 2的嵌套路由，同时提供一个详细的项目示例来演示它的用法。

配置嵌套路由

在Vue Router中配置嵌套路由非常简单，只需在父路由的children选项中定义子路由即可。以下是一个基本的嵌套路由配置示例：

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child1',
          component: Child1
        },
        {
          path: 'child2',
          component: Child2
        }
      ]
    }
  ]
})

在这个示例中，我们定义了一个名为/parent的父路由，它包含两个子路由：/parent/child1和/parent/child2。父路由的组件通常包含用于显示子路由内容的。

使用

在父路由组件中，你可以使用来渲染子路由的内容。是一个占位符，子路由的组件将在这里渲染。

项目示例

<template>
  <div>
    <h1>父路由内容h1>
    <router-view>router-view>
  div>
template>

在这个示例中，用于渲染子路由的内容。当访问/parent/child1时，Child1组件将在父路由的中渲染。

导航至子路由

在Vue Router中，你可以通过导航链接或编程式导航访问子路由。

通过导航链接

使用组件创建导航链接，可以非常方便地导航到子路由。

项目示例

<template>
  <div>
    <router-link to="/parent/child1">访问子路由1router-link>
    <router-link to="/parent/child2">访问子路由2router-link>
  div>
template>

这将创建两个链接，用于导航至/parent/child1和/parent/child2。

编程式导航

你还可以使用路由对象进行编程式导航，例如：

项目示例

methods: {
  navigateToChild1() {
    this.$router.push('/parent/child1');
  },
  navigateToChild2() {
    this.$router.push('/parent/child2');
  }
}

在这个示例中，我们在组件中定义了两个方法，分别通过this.$router.push()进行编程式导航到子路由。

子路由的

父路由的组件通常包含一个，用于渲染子路由的内容。这使你可以创建复杂的页面结构，包括嵌套布局。

项目示例

<template>
  <div>
    <h1>父路由内容h1>
    <router-view>router-view>
    <p>父路由底部内容p>
  div>
template>

在这个示例中，用于渲染子路由的内容，并且父路由的底部内容将显示在子路由内容下方。

嵌套路由导航守卫

嵌套路由可以使用与普通路由一样的导航守卫，包括beforeEach、beforeResolve和afterEach等守卫。你可以在父路由或子路由上定义这些守卫。

项目示例

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child1',
          component: Child1,
          beforeEnter(to, from, next) {
            // 子路由独享的前置守卫
            next();
          }
        },
        {
          path: 'child2',
          component: Child2
        }
      ],
      beforeEnter(to, from, next) {
        // 父路由的前置守卫
        next();
      }
    }
  ]
})

在这个示例中，我们为父路由和子路由分别定义了前置守卫。这些守卫可以用于进行身份验证、权限检查等操作。

嵌套路由是Vue Router中一个非常有用的特性，允许你构建具有复杂页面结构的应用程序。通过使用嵌套路由，你可以更好地组织和管理你的路由，同时保持代码的可维护性。