上篇我们说了 vue 项目的目录设计，本篇我们来学习一下 vue 路由。
路由的作用：
在 web 端路由（route）就是 URL 到函数的映射，vue 的 router 就像一个容器，分配，处理每一个 route 到 URL 中。
文档地址：
vue 路由官方文档 https://router.vuejs.org/zh/guide/#html
安装：
- 通过 node.js 安装；
npm install vue-router
- 但是一般情况下在 node 中安装 vue 项目的时候根据提示选择安装 vue-router；
如何使用路由：
举个项目例子：
1. 添加路由链接, 打开 Nav.vue
<router-link to="/goods" class="nav-item"> 点菜 </router-link>
<router-link to="/rates" class="nav-item"> 评价 </router-link>
<router-link to="/seller" class="nav-item"> 商家 </router-link>
to 是路由指向的地址。
2. 决定将组建渲染在哪，打开 App.vue，添加：
<router-view/>
3. 配置路由, 打开 router 文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
//1. 引入各个组件
import Goods from '@/components/Goods/Goods'
import Rates from '@/components/Rates/Rates'
import Seller from '@/components/Seller/Seller'
Vue.use(Router)
//2. 配置路由 路径 -> 组件
export default new Router({
routes: [
{
path: '/',
redirect:'/goods'
},
{
path: '/goods',
component: Goods
},
{
path: '/rates',
component: Rates
},
{
path: '/seller',
component: Seller
}
],
linkActiveClass:'active'
})
redirect 路由重定向：
我们在 router 数组设定 redirect 为“/goods”。那么只要路径是 /。页面会跳转到 ”/goods” 页面。
redirect 官方文档：
https://cn.vuejs.org/v2/guide…
注意，当前激活导航设置方法：
linkActiveClass:'active'
linkActiveClass：固定属性；
‘active’：值。是我们定义的 class 类；
我们在点击评价的时候，会得到上图中的效果。
4. 路由的 keep-alive
针对于上图中的业务情况:
- 我们在点菜页面；
- 点了些食品；
- 那么现在购物车内会有我们点过的数据；
-
点击其他页面，数据需要得到保留。
所以使用 keep-alive 保留组件状态，避免重新渲染, 购物车的数据丢失。<keep-alive> <router-view ></router-view> </keep-alive>
keep-alive 官方文档：https://cn.vuejs.org/v2/api/#…
总结
我们从安装，到组件配置路由再到使用 keep-alive 的业务场景复现，让我们对 vue 的 router 相关的技术点有了一定了解，我们将一步步完善项目，丰富我们的技术经验。下篇我们通过 axios 为项目添加数据交互功能，敬请关注。