微客导航 » 文章资讯 » vue router2.0二级路由的简单使用

vue router2.0二级路由的简单使用

2024-02-16 21:26:05 339

本文实例为大家分享了vuerouter2.0二级路由的具体代码，供大家参考，具体内容如下

1、app.vue中

2、router中index.js(路由的路径配置)

importVuefrom'vue'
importRouterfrom'vue-router'
importHellofrom'@/components/Hello'
importLoginfrom'@/components/Login'
importindexfrom'@/components/index'
importHeaderfrom'@/components/Header/Header'
importProductfrom'@/components/Product/Product'

Vue.use(Router)

exportdefaultnewRouter({
routes:[
{
path:'/',
name:'Login',
component:Login
},
{
path:'/index',
name:'index',
component:index,
children:[//这里就是二级路由的配置
{
path:'/hello',
name:'Hello',
component:Hello
},
{
path:'/header',
name:'Header',
component:Header
},
{
path:'/product',
name:'Product',
component:Product
}
]
}
]
})

3、下面是我们的index.vue中的代码

4、最后就是新建hello、header、product这几个组件来验证我们的效果，这里就不做演示了，因为我自己已经测试过了，没有问题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue router2.0二级路由的简单使用

热门推荐

随机推荐