Vue路由组件vue-router

Vue.js 是当前最受欢迎的前端框架之一，它的主要优点在于易于使用和灵活。而 Vue-router 是 Vue.js 中非常重要的一部分，它通过一个单独的插件来管理应用的路由。通过 Vue-router，我们可以轻松地实现 SPA（单页面应用），并实现各种导航、重定向和路由拦截的功能。

### Vue-router 的安装和配置

要使用 Vue-router，首先需要将其安装到我们的项目中。安装方法非常简单，可以使用 npm、yarn 或者直接在页面中引用官方 CDN 地址。

```bash

npm install vue-router --save

```

安装成功后，我们需要在 Vue.js 应用程序中使用它。为了使用 Vue-router，你可以先创建一个单独的路由文件，例如，我们在 src 文件夹中创建一个 router.js 文件，内容如下：

```javascript

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 1. 定义路由组件

const Home = { template: '

const About = { template: '

// 2. 定义路由

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About }

]

// 3. 创建 router 实例

const router = new VueRouter({

routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例

const app = new Vue({

router

}).$mount('#app')

// 现在，应用已经可以使用 Vue-router 了。

```

在上述代码中，我们首先导入了 Vue.js 和 Vue-router 插件，然后定义了两个路由组件 Home 和 About。接着，我们定义了路由规则 routes，路由规则的 path 参数表示 URL 路径，component 参数表示访问这个 URL 的时候将动态加载的组件。

然后，我们创建了一个路由实例 router，将其传递给 Vue.js 的根实例 app，这样，整个应用就可以使用 Vue-router 了。最后，我们使用 $mount 方法将根实例挂载到了 HTML 文档中。

### Vue-router 的使用方式

有两种方式可以使用 Vue-router：通过 HTML5 History API 和通过 hash（即路由地址中以 # 开头的部分）。这里我们主要介绍使用 HTML5 History API 方式的使用方法。

当我们想要将某个 URL 映射到一个组件时，需要在路由中定义一个相应的规则。

```javascript

const router = new VueRouter({

mode: 'history',

routes: [

{

path: '/',

name: 'home',

component: Home

},

{

path: '/about',

name: 'about',

component: About

},

{

path: '/user/:id',

name: 'user',

component: User

}

]

})

```

在这个例子中，我们定义了三个路由规则，分别是 /、/about、以及 /user/:id，其中 /user/:id 表示匹配 /user/1、/user/2 等 URL，其中 :id 即为传参。

接下来，我们可以在组件中使用类似于下面的方式来声明要用于路由的链接或者在代码中进行编程式导航。

```html

Home

About

User

```

或者使用下面的方式编程式导航：

```javascript

router.push('/')

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

```

当这些链接被点击或者路由被切换时，Vue-router 会自动将匹配到的组件渲染到指定的区域。

### Vue-router 的高级特性

除了简单的路由匹配之外，Vue-router 还支持其他一些高级技术，例如路由嵌套、路由组件懒加载、重定向、过渡动画、路由守卫以及使用自定义的滚动条等。

#### 嵌套路由

嵌套路由允许我们在一个路由规则中包含另一个路由规则。在这种情况下，路由规则会被嵌套到父路由规则中。例如：

```javascript

const router = new VueRouter({

routes: [

{

path: '/',

name: 'home',

component: Home

},

{

path: '/about',

name: 'about',

component: About,

children: [

{

path: 'foo',

name: 'foo',

component: Foo

},

{

path: 'bar',

name: 'bar',

component: Bar

}

]

}

]

})

```

在这个例子中，我们在 /about 路由规则中定义了两个嵌套路由规则 /about/foo 和 /about/bar。

在组件中，我们可以使用下列方式来声明嵌套的链接：

```html

Foo

Bar

```

然后，在对应的子组件模板中，我们也可以使用类似于下面的方式来声明使用路由嵌套：

```html

Foo

```

#### 路由组件懒加载

当应用非常庞大的时候，一次性加载所有组件会导致首屏加载速度过慢，影响用户体验。这时就需要应用懒加载技术，即按需加载相关组件。Vue-router 也支持这种懒加载的方式，具体方式如下：

```javascript

const router = new VueRouter({

routes: [

{

path: '/',

component: () => import('./views/Home.vue')

},

{

path: '/about',

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

}

]

})

```

关键点是使用箭头函数以及 import() 函数来按需加载相关组件，这样即可实现在路由切换时按需加载组件的效果。

#### 重定向

有时候，我们需要将某些 URL 重定向到其他 URL。这种情况下，我们可以将我们的路由规则中指定一个 redirect 属性指向目标 URL 或路由：

```javascript

const router = new VueRouter({

routes: [

{

path: '/',

redirect: '/home'

},

{

path: '/home',

component: Home

}

]

})

```

在这个例子中，访问根路径 / 的时候，会自动跳转到 /home 路由规则下。

#### 过渡动画

Vue-router 还提供了路由切换时使用过渡动画的功能。通过给要切换的组件加上过渡动画即可实现。

在组件中使用 transition 标签来指定过渡动画，例如：

```html

```

在这个例子中，我们使用了名为 fade 的过渡动画，mode 属性指定了动画的模式为 out-in，即在旧组件离开之后才会加载新组件并出现。

然后，我们可以在 CSS 文件中定义 fade 过渡动画的相关样式，例如：

```css

.fade-enter-active,.fade-leave-active {

transition: opacity .5s

}

.fade-enter, .fade-leave-to {

opacity: 0

}

```

在定义好相关样式之后，在路由切换时就会自动应用过渡动画了。

#### 路由守卫

路由守卫是 Vue-router 的一项重要功能，它可以帮助我们在路由切换之前或之后添加一些自定义的逻辑，例如检查用户是否登录、页面访问权限等等。Vue-router 提供了三种级别的守卫：

- 全局守卫：应用的全局范围内的守卫，可以设置在路由器实例上；

- 路由守卫：应用级别的守卫，可以设置在路由规则上；

- 组件守卫：只会影响当前组件的守卫，包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 钩子函数。

在具体实现时，我们需要为每个级别的守卫注册相应的回调函数。

```javascript

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {

// 在跳转之前进行 Token 校验等逻辑判断

if (to.meta.auth && !isLoggedIn)

next('/login')

else

next()

})

export default router

```

在这个例子中，我们注册了一个全局守卫，在每次路由切换之前检查用户是否登录。如果用户未登录，那么就会重定向到登录页面。

#### 自定义滚动条

Vue-router 提供了一个非常实用的功能，即可以在路由切换之后自动滚动到页面的某个位置，实现方法非常简单。

```javascript

const router = new VueRouter({

routes: [

{

path: '/foo',

component: Foo,

// scrollBehavior 属性用来指定路由切换时滚动条的位置和行为

scrollBehavior (to, from, savedPosition) {

// 向上滚动到最顶部

return { x: 0, y: 0 }

}

}

]

})

```

在这个例子中，我们为 Foo 路由规则设置了 scrollBehavior 属性，并且让其在切换时总是向上滚动到页面的最顶部。这样，如果用户读取到底部并进行了路由切换，那么下个页面会自动滚动到页面顶部。

### 总结

Vue-router 是 Vue.js 中非常重要的一部分，它能够方便地管理前端应用中的路由，实现各种导航、重定向和路由拦截等功能。本文从 Vue-router 的安装、配置以及基础使用开始，介绍了其重要特性——嵌套路由、路由懒加载、重定向、过渡动画、路由守卫和自定义滚动条。在使用 Vue.js 的过程中，合理使用 Vue-router 能够帮助我们更好地设计和管理应用，从而提升用户体验和开发效率。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/