目录
2.1 底部路由导航开发（FooterGuide 组件）
2.1.1 页面布局
2.1.2 功能实现
2.2.3 主要目录如下
2.2.4 主要代码
2.2.5 其他部分代码
2.2.6 结果
路由导航的页面布局如下：
点击按钮可以切换路由，并且图标样式发生改变
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标签的默认行为,表示什么都不做--> <a href="javascript:;" class = "footerItems" :class = "{on: isPath('/search')}" @click = "goTo('/search')"> <span> <i class = "iconfont icon-fangdajing"></i> </span> <span>搜索</span> </a> <a href="javascript:;" class = "footerItems" :class = "{on: isPath('/order')}" @click = "goTo('/order')"> <span> <i class = "iconfont icon-order_icon"></i> </span> <span>订单</span> </a> <a href="javascript:;" class = "footerItems" :class = "{on: isPath('/profile')}" @click = "goTo('/profile')"> <span> <i class = "iconfont icon-gerenzhongxin1"></i> </span> <span>个人中心</span> </a> </div> </template> <script> export default { methods: { goTo: function (path) { this.$router.replace(path) }, isPath: function (path) { return this.$route.path === path } } } </script> <style > .footerGuideStyle { display: flex; position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 3.2rem; margin-bottom: 0.3rem; border-top: 1px solid #999999; } .footerItems { display: flex; flex: 1; flex-direction: column; align-items: center; text-align: center; margin: 0.5rem; color: #999999; } .on { color: #317ef3; } a { } span { font-size: 0.8rem; } .iconfont { font-size: 1.6rem; } </style>1 ./public/index.html 代码
里面必须加上一个代码：引入阿里矢量图标库<link rel="stylesheet" href="https://at.alicdn.com/t/font_1781632_1llgzrb5ezg.css">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>外卖app</title> <link rel="stylesheet" href="./static/css/reset.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_1781632_1llgzrb5ezg.css"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>2 简单的路由组件以及路由配置
在src文件夹中新建下面目录
给出其中一个简单的组件pages/Msite/Msite.vue，其他的可以自己简单写一下
<template> <div> <!--<HeaderTop title = "外卖"> <template v-slot:headerResearch> <router-link class = "leftHeader" to = "/search"> <span> <i class="iconfont icon-sousuo"></i> </span> </router-link> </template> <template v-slot:headerLogin> <router-link class = "rightHeader" to = "/login" > <span>登录|注册</span> </router-link> </template> </HeaderTop>--> <div>我是简单的路由组件</div> </div> </template> <script> /*首页组件*/ /* import HeaderTop from "../../components/HeaderTop/HeaderTop" export default { components: { HeaderTop } }*/ </script> <style lang="stylus" rel="stylesheet/stylus"> </style>3 路由配置
1）在上图中index.js中配置路由路径，向外暴露路由组件
//路由器模块 import Vue from "vue" import VueRouter from "vue-router" import Login from "../pages/Login/Login"; import Profile from "../pages/Profile/Profile" import HelloWorld from "../components/HelloWorld" import Msite from "../pages/Msite/Msite"; import Search from "../pages/Search/Search" import Order from "../pages/Order/Order"; /*解决一下报错问题：下面三行语句解决报错问题 * Uncaught (in promise) NavigationDuplicated * {_name: “NavigationDuplicated”, name: "NavigationDuplic}的报错问*/ const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }; Vue.use(VueRouter); export default new VueRouter({ //构造函数 // 多给配置项,向外暴露路由组件 routes:[ { path: "/", redirect: "/msite" }, { path: "/msite", component: Msite, meta: { showFooterGuide: true } }, { path: "/search", component: Search, meta: { showFooterGuide: true } }, { path: "/order", component: Order, meta: { showFooterGuide: true } }, { //一般路由器的配置 path: "/login", component:Login, meta: { showFooterGuide: false } }, { path: "/profile", component: Profile, meta: { showFooterGuide: true } }, { path: "/helloWorld", component: HelloWorld } ] })4 跟组件App.vue以及main.js代码
跟组件App.vue代码
<template> <div id = "app"> <router-view></router-view> <FooterGuide v-show = this.$route.meta.showFooterGuide></FooterGuide> </div> </template> <script> import FooterGuide from "./components/FooterGuide/FooterGuide" import {reqShops} from "./api" export default { components: { FooterGuide }, } </script> <style lang="stylus" rel="stylesheet/stylus"> #app width 100% height 100% background-color #f5f5f5 </style>main.js代码
import Vue from "vue"; import App from "./App.vue" import router from "./router" import Router from 'vue-router' import "../static/css/reset.css" //全局引入reset.css文件，在index引入的时候不知道为啥没有作用 import store from "./store" const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }; /*main函数入口*/ new Vue({ el: "#app",//需要定义一个html文档，然后文档里面仅有一个div，id为app render: h => h(App), router, store });参考
百里于2020年7月2日
如果有错，请您指出！如有侵权，请联系我删除！
