vue2.0路由之路由嵌套示例详解

前言

成都创新互联公司专业为企业提供玉龙网站建设、玉龙做网站、玉龙网站设计、玉龙网站制作等企业网站建设、网页设计与制作、玉龙企业网站模板建站服务,十年玉龙做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

vue一个重要的方面就是路由,下面是自己写的一个路由的例子分享给大家供大家参考学习,下面来看看详细的介绍。

方法如下:

1、引入依赖库就不必再说

2、创建组件

两种写法

第一种:间接

 
 var About = Vue.extend({

   template: '#about'

  });

第二种:直接

  var Out = Vue.extend({

   template: '

Out

This is the tutorial out vue-router.

' });

3、创建 router 实例,传 'routes'路由映射配置

var router = new VueRouter({

   routes: [

   { path: '/路径', component: 组件名 },

    { path: '/', component: 组件名}, //设置默认路径

     { path: "*", component:Home }//路径不存在   
    ] });

4、创建和挂载根实例。记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能

var vm = new Vue({

    router: router 

 }).$mount('#app'); 

整体的demo







 

 hello world





 
Go to Home Go to About Go to Out

关于路由嵌套

在配置routes映射时添加children配置

如下:

var router = new VueRouter({

 routes:[

  {path:'/home',component:Home,

   children:[//子路由

    {path:'news',component:News},

    {path:'change',component:change}    

  ]},

  {path:'/me',component:Me},

  {path:'/',component:Me}

  ]

   }) 

关于具体的demo可以参考GitHub上,另外还总结了一些自己最近在学习的阿里云上传图片等,会逐步更新,敬请指教!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对创新互联的支持。


当前标题:vue2.0路由之路由嵌套示例详解
转载来于:http://bzwzjz.com/article/jssecj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 教育网站设计方案 网站建设推广 手机网站制作 网站设计制作 成都网站建设 重庆网站建设 专业网站设计 成都网站建设 成都营销网站建设 重庆网站制作 手机网站建设 高端定制网站设计 高端网站设计推广 成都网站建设 定制网站建设多少钱 上市集团网站建设 手机网站制作 网站建设方案 网站建设方案 古蔺网站建设 成都响应式网站建设 app网站建设