7.vue-router的子路由嵌套

光是一级路由是满足不来日常使用的,例如 点击登陆,两个路由下面分别还要对应各自的 子路由 ,这就是它存在的意义

目录简略:


7.vue-router的子路由嵌套_第1张图片
子组件挂载2.jpg

导入 父 和 子 组件:
前面的操作就不提了,重要的写

父组件
import login from './comp/login.vue'
import regist from './comp/regist.vue'
子组件
import loginSon from './comp/son/loginSon.vue'
import registSon from './comp/son/registSon.vue'

路由模块 中添加 子路由

const router = new VueRouter({
    routes:[
        //redirect 设置默认显示的组件
        // { path: '/', redirect: '/src/comp/regist' },
        {
            path:'/src/comp/login.vue',
            component:login,
            children:[
                {path:'/src/comp/son/loginSon.vue',component:loginSon},
                {path:'/src/comp/son/registSon.vue',component:registSon},
            ]
        },
        {path:'/src/comp/regist.vue',component:regist}
    ]
})

子组件挂载到 对应的父组件上去
loginSon.vue挂载到login.vue上:


7.vue-router的子路由嵌套_第2张图片
子组件挂载.jpg

下面是另一种的路由设置(推荐)

 
  • 新闻资讯
  • import home from './comp/Tabbar/home.vue'
    import person from './comp/Tabbar/person.vue'
    import set from './comp/Tabbar/set.vue'
    import shopcar from './comp/Tabbar/shopcar.vue'
    //导入的子组件
    import NewsList from './comp/NewList/newList.vue'
    
    // 4.创建路由模块
    const router = new VueRouter({
        routes:[
            // 重定向
            {path:'/',redirect:'/home'},
            {path:'/home.vue',component:home},
                 {path:'/home/NewsList.vue',component:NewsList},
            {path:'/person.vue',component:person},
            {path:'/set.vue',component:set},
            {path:'/shopcar.vue',component:shopcar},
        ],
        linkActiveClass:'mui-active'
    })
    

    你可能感兴趣的:(7.vue-router的子路由嵌套)