Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 的核心库深度集成，可以非常方便地与其他 Vue 组件配合使用。Vue Router 允许开发者构建单页应用，通过不同的 URL 路由来加载不同的页面内容。在本文中，我们将详细介绍 Vue Router 的使用方法和一些常见的应用场景。

 

一、安装和基本使用

 

首先，我们需要通过 npm 或者 yarn 来安装 Vue Router。在终端中执行以下命令：

 

```

npm install vue-router

```

 

或者

 

```

yarn add vue-router

```

 

安装完成后，我们就可以在项目中引入 Vue Router，并在 Vue 的实例中使用它了。

 

```javascript

import Vue from 'vue';

import VueRouter from 'vue-router';

 

Vue.use(VueRouter);

```

 

接下来，我们可以创建一个路由实例，并定义一些路由规则。

 

```javascript

const router = new VueRouter({

routes: [

{

path: '/'

 

component: Home

}

 

{

path: '/about'

 

component: About

}

]

});

```

 

在上面的代码中，我们创建了两个路由规则。当访问根路径 '/' 时，会加载 Home 组件；当访问 '/about' 路径时，会加载 About 组件。

 

*，我们需要把路由实例挂载到 Vue 实例中。

 

```javascript

new Vue({

router

 

render: h => h(App)

}).$mount('#app');

```

 

现在，我们可以在组件中使用 ` ` 来渲染当前路由对应的组件。

 

```html

```

 

以上就是 Vue Router 的基本使用方法。通过定义路由规则，并使用 ` ` 来显示路由组件，我们可以构建一个简单的单页应用。

 

二、路由参数和动态路由匹配

 

Vue Router 还支持路由参数和动态路由匹配。这使得我们可以根据不同的参数来加载不同的组件。

 

首先，我们可以通过 `:` 来定义路由参数。

 

```javascript

const router = new VueRouter({

routes: [

{

path: '/user/:id'

 

component: User

}

]

});

```

 

在上面的代码中，我们定义了一个带有参数的路由规则。当访问 '/user/:id' 路径时，会根据 id 参数来加载 User 组件。

 

在 User 组件中，我们可以通过 `$route.params` 来获取参数值。

 

```javascript

export default {

mounted() {

console.log(this.$route.params.id);

}

}

```

 

在上面的代码中，我们在组件的 `mounted` 钩子函数中打印出了参数值。

 

除了路由参数，Vue Router 还支持动态路由匹配。例如，我们可以通过通配符 `*` 来匹配任意路径，并加载对应的组件。

 

```javascript

const router = new VueRouter({

routes: [

{

path: '/user/*'

 

component: NotFound

}

]

});

```

 

在上面的代码中，我们定义了一个通配符路由规则。当访问 '/user/*' 路径时，会加载 NotFound 组件。

 

在 NotFound 组件中，我们可以通过 `$route.path` 来获取匹配的路径。

 

```javascript

export default {

mounted() {

console.log(this.$route.path);

}

}

```

 

以上就是路由参数和动态路由匹配的用法。通过使用路由参数和通配符来匹配不同的路径，我们可以根据不同的需求加载不同的组件。

 

三、嵌套路由

 

Vue Router 还支持嵌套路由，这使得我们可以在一个路由下继续定义子路由。

 

首先，我们可以在路由规则中使用 `children` 来定义子路由。

 

```javascript

const router = new VueRouter({

routes: [

{

path: '/user'

 

component: User

 

children: [

{

path: 'profile'

 

component: UserProfile

}

 

{

path: 'settings'

 

component: UserSettings

}

]

}

]

});

```

 

在上面的代码中，我们在 '/user' 路径下定义了两个子路由。当访问 '/user/profile' 路径时，会加载 UserProfile 组件；当访问 '/user/settings' 路径时，会加载 UserSettings 组件。

 

我们还可以在父组件中使用 ` ` 来渲染子组件。

 

```html

```

 

以上就是嵌套路由的用法。通过在父组件中使用 ` `，我们可以加载子组件并形成一个嵌套的路由结构。

 

四、导航守卫

 

Vue Router 提供了导航守卫来控制路由的跳转行为。我们可以在跳转前、跳转后以及跳转被拒绝的情况下执行一些操作。

 

首先，我们可以使用 `beforeEach` 方法来定义全局前置守卫。

 

```javascript

router.beforeEach((to

from

next) => {

console.log('beforeEach');

next();

});

```

 

在上面的代码中，我们定义了一个全局前置守卫。每次跳转路由时，都会执行该守卫函数。

 

守卫函数接受三个参数：

 

- `to`：即将跳转的路由对象。

- `from`：当前的路由对象。

- `next`：一个函数，用于控制跳转行为。调用 `next()` 会继续跳转，调用 `next(false)` 会取消跳转。

 

我们还可以在路由规则中使用 `beforeEnter` 方法来定义路由独享的守卫。

 

```javascript

{

path: '/about'

 

component: About

 

beforeEnter: (to

from

next) => {

console.log('beforeEnter');

next();

}

}

```

 

在上面的代码中，我们定义了一个路由独享的守卫。仅当访问 '/about' 路径时，才会执行该守卫函数。

 

除了前置守卫，Vue Router 还提供了其他导航守卫，例如 `beforeResolve`、`afterEach` 等。这些守卫可以帮助我们更细粒度地对路由进行控制。

 

五、路由懒加载

 

当应用程序变得庞大时，我们可能需要按需加载路由组件，以降低首页的加载时间。Vue Router 提供了路由懒加载的功能，使得我们可以在需要时才去加载相应的组件。

 

首先，我们可以在路由规则中使用 `component` 的值来引入一个异步组件。

 

```javascript

{

path: '/about'

 

component: () => import('./About.vue')

}

```

 

在上面的代码中，我们使用了动态 `import()` 语法引入了一个异步组件。这里的 `./About.vue` 是要引入的文件路径。

 

在使用路由懒加载时，可以对组件进行拆分，并按需引入。这样，在访问到对应的路由时，才会去加载相应的组件。

 

六、导航进度条

 

Vue Router 提供了导航进度条的功能，可以在页面跳转时显示一个进度条来提示用户。

 

首先，我们可以在路由配置中开启导航进度条。

 

```javascript

const router = new VueRouter({

routes: [...]

 

mode: 'history'

 

base: process.env.BASE_URL

 

scrollBehavior

 

linkActiveClass: 'active'

 

linkExactActiveClass: 'exact-active'

 

fallback: true

 

parseQuery

 

stringifyQuery

 

normalizeLocation

});

```

 

在上面的代码中，我们通过设置 `linkActiveClass` 和 `linkExactActiveClass` 来指定激活状态的样式类。这样在当前路由匹配成功时，路由链接就会添加对应的样式类。

 

我们还可以在页面中添加一个 ` ` 来实现路由跳转功能。

 

```html

```

 

在上面的代码中，我们使用 ` ` 来定义路由链接。点击链接时，会触发页面的跳转。

 

Vue Router 的导航进度条功能非常简单，只需要设置一些配置项就可以使用。

 

总结

 

本文中，我们介绍了 Vue Router 的基本使用方法，并详细说明了路由参数和动态路由匹配、嵌套路由、导航守卫、路由懒加载和导航进度条等功能的用法。通过使用 Vue Router，我们可以方便地构建单页应用，并实现复杂的路由跳转控制。希望本文对大家学习和使用 Vue Router 有所帮助。