自己写一个Vue子路由

作者: 9979eb0cd854 | 来源:发表于2018-08-13 16:23 被阅读463次

    一:路由:在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载。

    二:路由:是(SPA)单页应用的路径管理器,单页应用相当于只有一个index.html页面,改变路径可切换至不同的页面

    子路由:

    比如有一个地址,圈出的地方在banana目录下,可以是b1,也可以是b2,那么b1,b2就叫做banana的子路由


    image.png

    创建子路由的步骤:

    1、首先做两个导航,分别是banana下边的1号和2号。在App.vue里做


    image.png

    2、在components目录下创建两个文件,分别是b1.vue和b2.vue,两个文件的内容相似即可


    image.png

    3、在老父亲banana.vue中添加一行。router-view是为了给子模板提供插入位置。b1,b2是banana的子页面,就像继承一样


    image.png

    4、在Router文件夹的index.js中添加路由规则


    image.png

    children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。


    image.png

    相关文章

      网友评论

      • yemoumou:俱怀逸兴壮思飞,欲上青天览明月。-简书朋友你好,我是币圈一老友,我的写作方向是区块链和数字货币,初到简书,望多多关照。互粉互赞,已赞,期待您的回赞哦。-ڤ耤誥ƅ偂

      本文标题:自己写一个Vue子路由

      本文链接:https://www.haomeiwen.com/subject/crgybftx.html