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
1
2
3

配置 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

创建 Vue 组件

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

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

1
2
3
4
5
6
7
8
9
10
11

在应用程序中使用 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),
});
1
2
3
4
5
6
7
8
9

在这个示例中，我们将 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

创建路由视图

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

1
2
3
4
5

完整的项目示例

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

// App.vue



1
2
3
4
5
6
7
8
9
10
11
12

// Home.vue



1
2
3
4
5
6
7
8
9
10
11
12

// About.vue



1
2
3
4
5
6
7
8
9
10
11
12

// Contact.vue



1
2
3
4
5
6
7
8
9
10
11
12

// 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

new Vue({
  el: '#app',
  router,
  render: (h) => h(App),
});
1
2
3
4
5
6
7
8
9
10

在这个示例中，我们创建了一个具有首页、关于页面和联系页面的简单单页面应用程序，并使用 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>
1
2
3
4
5
6

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

编程式导航

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

项目示例

methods: {
  navigateToHome() {
    this.$router.push('/home');
  },
  navigateToAbout() {
    this.$router.push('/about');
  }
}
1
2
3
4
5
6
7
8

在这个示例中，我们定义了两个方法，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 }
    ]}
  ]
})
1
2
3
4
5
6
7
8
9

在这个示例中，/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>
1
2
3
4
5
6

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

命名路由

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

项目示例

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home, name: 'home' },
    { path: '/about', component: About, name: 'about' }
  ]
})
1
2
3
4
5
6

在这个示例中，我们为两个路由分别起了名字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();
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这个示例中，我们添加了一个全局前置守卫，用于在导航到/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
        }
      ]
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

使用

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

项目示例

<template>
  <div>
    <h1>父路由内容h1>
    <router-view>router-view>
  div>
template>
1
2
3
4
5
6

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

导航至子路由

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

通过导航链接

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

项目示例

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

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

编程式导航

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

项目示例

methods: {
  navigateToChild1() {
    this.$router.push('/parent/child1');
  },
  navigateToChild2() {
    this.$router.push('/parent/child2');
  }
}
1
2
3
4
5
6
7
8

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

子路由的

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

项目示例

<template>
  <div>
    <h1>父路由内容h1>
    <router-view>router-view>
    <p>父路由底部内容p>
  div>
template>
1
2
3
4
5
6
7

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

嵌套路由导航守卫

嵌套路由可以使用与普通路由一样的导航守卫，包括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();
      }
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

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