189 8069 5689

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://cdxtjz.cn/article/jssecj.html

其他资讯