路由嵌套

最新推荐文章于 2024-05-13 08:02:48 发布

盼盼哦

最新推荐文章于 2024-05-13 08:02:48 发布

阅读量1.4k

点赞数 2

分类专栏： Vue 前端开发

本文链接：https://blog.csdn.net/invalid_oath/article/details/115450579

版权

前端开发同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

Vue

11 篇文章 1 订阅

订阅专栏

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

原因：在同一个页面点击一个路由连接<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>

盼盼哦

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
路由嵌套

一. 为什么要使用嵌套路由原因：在同一个页面点击一个路由连接<router-link>时，在这一级路由组件<router-view>不消失的情况下，出现这一级<router-link>指向的路径的下一级路由组件<router-view>解决方案：在上级组件路由下,通过在这一级的路由规则对象中，添加children属性嵌套子路由，保证上级路由组件显示的同时，出现子路由组件路由规则对象：新建的路由对象routerObj的构造函数中的路由匹配规则的数组rou
复制链接

扫一扫