Vue中的嵌套路由

router官网-嵌套路由

实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
Vue中的嵌套路由_第1张图片

<body>
    <div id="app">
        <h1>欢迎使用路由导航h1>
        <router-link to="/login">登陆组件router-link>
        <router-link to="/main">主页组件router-link>
        <router-view>router-view>
    div>

    <template id="main">
        <div>
            <h2>主页组件中的导航菜单h2>
            <p>
                <router-link to="/main/user">用户组件router-link>
                <router-link to="/main/emp">员工组件router-link>
                <router-link to="/main/dept">部门组件router-link>
                <router-link to="/main/wel">欢迎页router-link>
            p>
            
            <router-view>router-view>
        div>
    template>

<script>
    var main = {template: '#main'}
    var login = {template: '

登陆界面

'
} var user = {template: '

用户界面

'
} var emp = {template: '

员工界面

'
} var dept = {template: '

部门界面

'
} var welcom = {template: '

欢迎

'
} var router = new VueRouter({ mode: 'history', routes: [ {path: '/login', component: login}, //父路由,顶级路由 { path: '/main', name: 'main', //设置欢迎页:配置一个重定向,并且重定向路径为嵌套路由中的欢迎页路径即可 redirect:{name:'wel'}, component: main, //嵌套子路由列表 children: [ /** * 嵌套子路由对象 * 1.绝对路径:以斜杠开头,此路径就是子路径的真实路径 * 用户组件对应的路径:/user * 2.相对路径:不以斜杠开头,此路径的真实路径=父路径+子路径 * 用户组件对应的路径:/main/user * */ {path:'user', name:'user', component: user}, {path:'emp', name:'emp', component: emp}, {path:'dept', name:'dept', component: dept}, {path:'wel', name:'wel', component: welcom} ] } ] }) new Vue({ el: '#app', //在Vue对象中注册路由对象 router })
script> body>

你可能感兴趣的:(vue,vue.js,嵌套路由)