欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

路由嵌套

程序员文章站 2022-06-02 20:11:55
...

一. 为什么要使用嵌套路由

原因:在同一个页面点击一个路由连接<router-link>时, 在这一级路由组件<router-view>不消失的情况下,出现这一级<router-link>指向的路径的下一级路由组件<router-view>

解决方案:在上级组件路由下,通过在这一级的路由规则对象中,添加children属性嵌套子路由,保证上级路由组件显示的同时,出现子路由组件

路由规则对象:新建的路由对象routerObj的构造函数中的路由匹配规则的数组routes中的一个路由规则
例如:

var routerObj = new VueRouter({
		routes:
                { path: '/login', component: login },//路由规则对象
                { path: '/register', component: register }
            ]
        })

二. 路由嵌套步骤

1.使用组件<router-link>渲染出account标签链接,点击该标签后,通过<router-view>出现account的组件模板效果(这属于父路由),组件account的模板对象包括子路由的组件<router-link>

2.在父路由组件的基础上,先将子路由需要渲染的组件(其模板对象)定义好,例如login,register

3.在路由router的路由规则中,选择匹配路径的父路由规则对象,在该对象内添加children属性,属性内的写法和普通路由一样,但是子路由的path前面,不要带’/’,最后通过父组件模板对象中的<router-view></router-view>作为子路由login,register的出口,渲染出子路由组件的效果

代码演示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>
    <div id="app">
        <router-link to="/account">Account</router-link>
        <router-view></router-view>
    </div>

    <template id="tem1">
        <div>
            <h1>这是Account组件</h1>

            <router-link to="/account/login">登录</router-link>
            <router-link to="/account/register">注册</router-link>

            <router-view></router-view>
        </div>
    </template>

    <template id="tem2">
        <div>
            <h1>登录</h1>
        </div>
    </template>

    <template id="tem3">
        <div>
            <h1>注册</h1>
        </div>
    </template>

    <script>
        var account = {
            template: '#tem1'
        }
        var login = {
            template: '#tem2',
        }
        var register = {
            template: '#tem3'
        }
        var router = new VueRouter({
            routes: [
                {
                    path: '/account',
                    component: account,
                    //使用children属性,实现子路由,同时,子路由的path前面,不要带'/',否则永远以根路径开始请求
                    children: [
                        { path: 'login', component: login },
                        { path: 'register', component: register }
                    ]
                }
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        })
    </script>
</body>

</html>
相关标签: Vue 前端开发