使用vue-cli3脚手架开发设计路由导航

目录

2.1 底部路由导航开发（FooterGuide 组件）

2.1.1 页面布局

2.1.2 功能实现

2.2.3 主要目录如下

2.2.4 主要代码

2.2.5 其他部分代码

2.2.6 结果

---

2.1 底部路由导航开发（FooterGuide 组件）

2.1.1 页面布局

路由导航的页面布局如下：

2.1.2 功能实现

点击按钮可以切换路由，并且图标样式发生改变

2.2.3 主要目录如下

2.2.4 主要代码

src/components/FooterGuide/FooterGuide中代码如下

1）非stylus版本

其中：

      类似于v-bind:class = "{ on: isPath('/msite')}"语句的作用路由导航栏图标颜色变换；

      v-on:click ="goTo('/msite')"点击时用于切换路由页面

<template>

    <div class = "footerGuideStyle">

      <a href="javascript:;" class = "footerItems" v-bind:class = "{on: isPath('/msite')}" v-on:click =

        "goTo('/msite')">

        <span>

          <i class = "iconfont icon-waimai"></i>

        </span>

        <span>首页</span>

      </a>  <!--href='javascript:;'去掉a标签的默认行为,表示什么都不做-->

      <