vue 2.0路由之路由嵌套示例详解

vue 2.0路由之路由嵌套示例详解

前言

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

方法如下：

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

2、创建组件

两种写法

第一种：间接

{{mshttp://g}}

var About = Vue.extend({

template: '#about'

});

第二种：直接

var Out = Vue.extend({

template: '

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

Go to Home

Go to About

Go to Out

{{msg}}

This is the tutorial about vue-router.

关于路由嵌套

在配置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上，另外还总结了一些自己最近在学习的阿里云上传图片等，会逐步更新，敬请指教！

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。