微客导航 » 文章资讯 » vue 2.0路由之路由嵌套示例详解

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

2024-02-24 05:41:03 148

前言

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

方法如下：

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

2、创建组件

两种写法

第一种：间接





Home

{{msg}}

varAbout=Vue.extend({

template:'#about'

});

第二种：直接

varOut=Vue.extend({

template:'Out
Thisisthetutorialoutvue-router.'

});

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

varrouter=newVueRouter({

routes:[

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

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

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

});

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

varvm=newVue({

router:router

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

整体的demo









helloworld











GotoHome

GotoAbout

GotoOut

Home

about

Thisisthetutorialaboutvue-router.

/*1、创建组件*/ varHome=Vue.extend({ template:'#home', data:function(){ return{ msg:'Hello,vuerouter!' } } }); varAbout=Vue.extend({ template:'#about' }); varOut=Vue.extend({ template:'

Out

Thisisthetutorialoutvue-router.

' }); //2.创建router实例，然后传`routes`路由映射配置 varrouter=newVueRouter({ routes:[ {path:'/home',component:Home}, {path:'/about',component:About}, {path:'/out',component:Out}, {path:'/',component:Home},//设置默认路径 {path:"*",component:Home}//路径不存在 ] }); //3.创建和挂载根实例。记得要通过router配置参数注入路由，从而让整个应用都有路由功能 varvm=newVue({ router:router }).$mount('#app'); //现在，应用已经启动了！

关于路由嵌套

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

如下：

varrouter=newVueRouter({

routes:[

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

children:[//子路由

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

{path:'change',component:change}

]},

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

{path:'/',component:Me}

]

})

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

总结

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

返回顶部
3162201930
czq8825@qq.com

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

Home

Out

Home

about

Out

热门推荐

随机推荐