首页 > web前端 > js教程 > 正文

Vue.js的嵌套路由(子路由)

php中世界最好的语言
发布: 2018-03-13 14:39:30
原创
1867 人浏览过

这次给大家带来Vue.js的嵌套路由(子路由),使用Vue.js嵌套路由(子路由)的注意事项有哪些,下面就是实战案例,一起来看一下。

children
嵌套路由,子路由插入到了父组件apple中

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',  routes: [    //  做一个映射表
    {      path: '/apple',      component: Apple,      // 嵌套路由,子路由插入到了父组件apple中
      children: [
        {          path: 'red',          component: RedApple
        }
      ]
    },
    {      path: '/banana',      component: Banana
    }
  ]
})
登录后复制

在父路由apple组件中,将RedApple组件插入进来

登录后复制

1.gif

to red apple
to red apple
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue.js的vue标签属性和条件渲染

使用Vue.js有哪些注意事项

以上是Vue.js的嵌套路由(子路由)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!