脚本宝典收集整理的这篇文章主要介绍了

vue从创建到完整的饿了么(2)路由

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

说明

  1. 上一篇地址--创建
  2. 苍渡大神Github项目源码地址--源码地址
  3. 下一篇地址--引入UI框架

home.vue 创建

  1. 根据源码,先在src文件夹下新建文件夹page,在page中新建home文件夹,在home文件夹中新建home.vue,home.vue代码如图图片描述
  2. template中写html,script中写js,style中写css,style scoped的意思是css样式只在本页面使用
  3. 页面内容先就写这么多,但是页面怎么显示呢?打开App.vue,修改如图图片描述
  4. 页面会显示在<router-view></router-view>里,一个页面可以用几个<router-view></router-view>我也不会等用到再说,现在的问题是怎么让<router-view></router-view>知道显示咱们的home.vue呢?

router路由创建

  1. vue-router来控制显示哪个页面(我也不会边学边用,官方文档在此),使用的话先引用到vue里(上一章的创建时候用npm已经下载了),这里可以直接使用。
  2. 首先在src下创建router文件夹,在router下创建routers.js文件,所有的路由控制都写在这个文件里。
  3. 看了一下源码的路由,看得我头皮发麻,算了先自己写写看,es6等以后再学。routers.js页面代码
    图片描述 8. 输出一个数组,数组里有一个对象(因为所有的页面都挂在App.vue里所以只有一个对象,这是我目前的理解)。path表示路径,component表示显示的页面(要显示哪个xxx.vue文件),children表示的嵌套的路由。路由先写这么多,但是输出路由了谁来执行呢?打开main.js文件。
  4. 因为要用路由模块和自己写的routers.js文件,所以先引进来

    import VueRouter from 'vue-router' import routes from './router/routers' Vue.use(VueRouter)
  5. 根据官网的例子新建一个VueRouter挂到vue下

    const router = new VueRouter({     routes })
  6. 最终main.js修改如下图片描述
  7. 用cmd运行试试,弹出以下页面图片描述ok,运行成功,接下来应该写页面了吧?

总结

以上是脚本宝典为你收集整理的

vue从创建到完整的饿了么(2)路由

全部内容,希望文章能够帮你解决

vue从创建到完整的饿了么(2)路由

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过