Vue实战—路由轻松设置vue-router（3）

上篇我们说了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为项目添加数据交互功能，敬请关注。