乐趣区

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 为项目添加数据交互功能,敬请关注。

退出移动版