Vue实战路由轻松设置vuerouter3

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