vue从创建到完整的饿了么（2）路由

mmy123456 发布于2019-08-20 18:53 / 315人阅读

摘要：首先在下创建文件夹，在下创建文件，所有的路由控制都写在这个文件里。表示路径，表示显示的页面要显示哪个文件，表示的嵌套的路由。

说明

上一篇地址--创建

苍渡大神Github项目源码地址--源码地址

下一篇地址--引入UI框架

home.vue 创建

根据源码，先在src文件夹下新建文件夹page，在page中新建home文件夹，在home文件夹中新建home.vue，home.vue代码如图

template中写html，script中写js，style中写css，style scoped的意思是css样式只在本页面使用

页面内容先就写这么多，但是页面怎么显示呢？打开App.vue，修改如图

页面会显示在里，一个页面可以用几个我也不会等用到再说，现在的问题是怎么让知道显示咱们的home.vue呢？

router路由创建

用vue-router来控制显示哪个页面（我也不会边学边用，官方文档在此），使用的话先引用到vue里（上一章的创建时候用npm已经下载了），这里可以直接使用。

首先在src下创建router文件夹，在router下创建routers.js文件，所有的路由控制都写在这个文件里。

看了一下源码的路由，看得我头皮发麻，算了先自己写写看，es6等以后再学。routers.js页面代码
8. 输出一个数组，数组里有一个对象（因为所有的页面都挂在App.vue里所以只有一个对象，这是我目前的理解）。path表示路径，component表示显示的页面（要显示哪个xxx.vue文件），children表示的嵌套的路由。路由先写这么多，但是输出路由了谁来执行呢？打开main.js文件。

因为要用路由模块和自己写的routers.js文件，所以先引进来

import VueRouter from "vue-router"
import routes from "./router/routers"
Vue.use(VueRouter)

根据官网的例子新建一个VueRouter挂到vue下

const router = new VueRouter({
    routes
})

最终main.js修改如下

用cmd运行试试，弹出以下页面ok，运行成功，接下来应该写页面了吧？

混合云专线服务饿了么饿了么 js 饿了么配送调度饿了么api接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84839.html

vue从创建到完整的饿了么（3）引入UI框架

摘要：说明上一章从创建到完整的项目路由苍渡大神项目源码地址地址下一章布局以及框架咱们先看一下的效果图，原网址在此接下来用什么框架呢因为以前用的是，所以这次用练练手，文档在此首先下载结果如图那两个警告说的啥我也不懂，先不管大神指说明上一章--vue从创建到完整的项目（2）路由苍渡大神项目源码地址--Github地址下一章--Home布局以及vue-resource UI框架 ...

fantix 2019-08-20 18:53 评论0 收藏0
vue从创建到完整的饿了么（5）v-for，v-bind与计算属性

摘要：的命令都用来开头。用来绑定属性。排序思路重新创建一个，键名是从到，键值就是获取的数据的键值。计算函数写在哪一种方法是写在生命周期的数据请求里，直接返回一个处理好的，但咱们用另一种方法计算属性。把这个加到城市名字的上即可解决。说明 1.上一章--Home.vue及vue-resource使用2.cangdu大神的项目源码地址--Github地址3.接口地址--Github地址4.UI框...

james 2019-08-20 18:58 评论0 收藏0
vue从创建到完整的饿了么（4）Home.vue布局及vue-resource使用

摘要：咱们在第一章创建的时候已经安装了。而从创建到使用到结束分为了十个周期，称为生命周期钩子，而是把数据加载的的时候调用这是我目前的理解。中有两个函数，第一个是请求成功的函数，第二个是请求失败的函数。说明 1.上一章--引入UI框架2.苍渡大神Github源码地址--源码地址3.UI框架用的是Mint UI，上一章已经引入4.数据接口地址--Github5.下一章--v-for,v-bin...

levius 2019-08-20 18:58 评论0 收藏0
vue2 + vuex 高度还原饿了么 App，与官方后台真实数据交互，获取商品信息，实现登陆、购

摘要：注此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。目前下单功能已经实现，下单功能完全采用官网真实数据，可以控制官网发短信或者打电话到指定的手机号码，下单后可以在手机中查看并且付款。前言 vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余...

JeOam 2019-08-20 14:26 评论0 收藏0