vue$route（vuerouter和locationhref区别）

简介：

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得轻而易举。在 Vue.js 中使用 Vue Router 可以帮助我们快速地构建出一个功能完善的单页面应用程序。

多级标题：

一、Vue Router 的基本用法

二、路由的配置

三、嵌套路由

四、路由参数传递

五、导航守卫

一、Vue Router 的基本用法

Vue Router 可以通过 npm 安装，然后在 Vue 项目中引入。在初始化 Vue 实例时，需要使用 Vue.use() 方法来注册 Vue Router 插件。通过 Vue Router ，我们可以在应用中定义路由规则、跳转路由、传递参数等。基本的用法如下：

```javascript

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

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

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

const router = new VueRouter({

routes

})

new Vue({

router

}).$mount('#app')

```

二、路由的配置

在 Vue Router 中，路由的配置是通过 routes 数组来完成的。每个路由规则由一个对象表示，该对象包含 path（路径）和 component（组件）等属性。例如：

```javascript

const routes = [

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

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

```

这里定义了两个路由规则，分别表示访问 '/home' 和 '/about' 路径时，分别加载 Home 和 About 组件。

三、嵌套路由

Vue Router 支持嵌套路由，即在一个组件内部定义子路由规则。嵌套路由可以帮助我们更好地管理组件之间的嵌套关系。例如：

```javascript

const routes = [

{

path: '/user',

component: User,

children: [

{ path: 'profile', component: Profile },

{ path: 'settings', component: Settings }

]

}

```

这里定义了一个父路由 '/user'，在 User 组件内部定义了两个子路由规则 '/profile' 和 '/settings'，分别对应 Profile 和 Settings 组件。

四、路由参数传递

在实际开发中，经常需要将参数传递给路由的目标组件。在 Vue Router 中，可以通过路由的 params 或 query 对象来传递参数。params 是在路径中定义的参数，query 是在路径后面以查询字符串的方式传递的参数。例如：

```javascript

// 路由定义

const routes = [

{ path: '/user/:id', component: User },

{ path: '/search', component: Search }

// 跳转路由并传递参数

router.push({ path: '/user/123' })

router.push({ path: '/search', query: { keyword: 'vue' }})

```

五、导航守卫

Vue Router 提供了导航守卫，可以在路由跳转之前、之后或跳转失败时执行一些逻辑。导航守卫可以帮助我们控制路由的权限、加载状态等。常用的导航守卫包括 beforeEach、beforeResolve、afterEach 等。例如：

```javascript

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

// do something before route change

next()

})

router.afterEach((to, from) => {

// do something after route change

})

```

通过导航守卫，我们可以更灵活地控制路由的跳转过程，实现一些特定的业务逻辑。

总结：

Vue Router 是 Vue.js 构建单页面应用不可或缺的一部分，通过上述介绍，我们了解了 Vue Router 的基本用法、路由的配置、嵌套路由、路由参数传递和导航守卫等内容，希望对大家理解和使用 Vue Router 有所帮助。