Vue路由组件vue-router

Vue-router是Vue.js官方的路由管理器，用于实现单页应用中的路由切换。Vue Router 遵循 “大路由” 与 “小路由” 嵌套路由的设计思路。大路由就是项目的一级路由，小路由就是在项目的一级路由下的路由。这样设计十分便于处理并且分配工作。

## 使用方法

### 安装

在使用Vue-router之前，需要先安装它，可以通过npm进行安装，打开终端进入项目目录，输入以下命令：

```

npm install vue-router --save

```

### 引入

在安装完成后，在main.js中进行引入：

```javascript

import Vue from 'vue';

import VueRouter from 'vue-router';

// 引入路由配置文件

import routes from './routes';

Vue.use(VueRouter);

// 创建 router 实例，然后传 `routes` 配置

const router = new VueRouter({

routes

})

new Vue({

router,

el: '#app',

render: h => h(App)

});

```

### 路由配置

在使用Vue-router之前，需要在项目中进行路由配置，在项目目录中创建一个routes.js文件：

```javascript

import Vue from 'vue';

import VueRouter from 'vue-router';

// 引入所需要的组件

import Home from '../components/Home.vue';

import About from '../components/About.vue';

Vue.use(VueRouter);

// 配置路由映射

const routes = [{

path: '/',

component: Home

},

{

path: '/about',

component: About

}

];

// 导出路由

export default new VueRouter({

routes,

mode: 'history'

});

```

### 页面跳转

```html

```

### 动态路由

动态路由是指路由参数不是固定的，而是通过参数来确定。采用冒号`:`通过动态路径参数的方式定义路由参数，如下：

```javascript

const router = new VueRouter({

routes: [

{

path: '/user/:id',

name: 'User',

component: User

}

]

})

```

在页面中，可以通过`$route.params.id`获取对应的路由参数值。

### 嵌套路由

Vue Router 支持路由的嵌套，即在一个路由下面去创建子路由，路由之间形成了层级关系，如下：

```javascript

const router = new VueRouter({

routes: [

{

path: '/',

component: Home,

children: [

{

path: '',

component: Dashboard

},

{

path: 'orders',

component: Orders

},

{

path: 'profile',

component: Profile

}

]

}

]

})

```

### 路由守卫

路由守卫主要负责拦截路由，进行路由跳转时的拦截操作。和 Vue.js 的生命周期钩子类似，都可在路由实例化对象的配置中添加守卫函数。它可以拦截路由的三个行为：路由跳转前，路由跳转后，路由跳转出错。

```javascript

const router = new VueRouter({

routes: [...],

})

// 全局前置守卫,在切换路由前进行检查

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

if (to.matched.some(record => record.meta.requiresAuth)) {

// 判断是否需要登录才能进入

if (localStorage.getItem('userId')) {

next();

} else {

next({

path: '/login',

query: { redirect: to.fullPath }

});

}

} else {

next(); // 确保一定要调用 next()

}

})

// 全局后置钩子

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

// 进行一些操作

})

```

## 案例

以下是一个简单的购物车页面，通过Vue-router实现了同一页面内不同组件之间的切换。

```html

```

### 商品列表页面

```html

```

### 购物车页面

```html

```

### Vuex 状态管理

以上代码中用到了一个全局状态管理工具 Vuex，可以更高效地管理组件之间的状态。

```javascript

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({

state: {

cart: []

},

mutations: {

addToCart(state, product) {

const cartItem = state.cart.find(item => item.id === product.id);

if (cartItem) {

cartItem.quantity++;

} else {

const newCartItem = Object.assign({

quantity: 1

}, product);

state.cart.push(newCartItem);

}

},

removeFromCart(state, product) {

const cartItem = state.cart.find(item => item.id === product.id);

if (cartItem.quantity > 1) {

cartItem.quantity--;

} else {

const index = state.cart.findIndex(item => item.id === product.id);

state.cart.splice(index, 1);

}

}

},

getters: {

totalPrice(state) {

return state.cart.reduce((total, item) => total + (item.price * item.quantity), 0);

}

}

});

```

## 总结

Vue-router作为Vue.js的官方路由管理器，功能相对较为全面，提供了支持嵌套路由、动态路由、路由守卫等常用功能。同时，它与Vue.js的结合十分紧密，使用起来也比较容易上手，非常适合用于构建中小型的单页应用。加入Vuex进行状态管理进一步提高了页面组件之间的协同能力。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/