Aninhamento de rota através do vue-router no Vue

Com a aplicação de uma única página Vue (SPA) requer complicado roteamento aninhada
aninhamento roteamento permite interface de usuário mais complexo e componentes aninhados

Se você não estiver familiarizado com o roteamento Vue, consulte o meu outro blog: Vue Learning Tour Part9: Usando o vue-router para obter roteamento front-end e passagem de parâmetros

Aninhamento de rota significa que existem subcomponentes dentro do componente de rota, o que é adequado para muitos cenários de negócios

As etapas para obter o aninhamento de rota são relativamente simples

Primeiro defina a sub-rotina no objeto de roteamento:

Observe o nome do caminho da rota filho : o caminho da rota filho não pode ser precedido por uma barra.O
caminho da rota filho será automaticamente escrito no caminho da rota pai

<script>
    // 定义组件模板对象
    var account={
        template:"#tmpl"
    }
    var login={
        template:"<h3>登录</h3>"
    }
    var register={
        template:"<h3>注册</h3>"
    }

    // 路由对象
    var router=new VueRouter({
        routes:[
            {
                path:"/account",
                component:account,
                // 子路由
                children:[
                    // 子路由的path前面不能加斜杠 path前面会自动拼上父路由的path
                    {path:"login",component:login}, // /account/login
                    {path:"register",component:register} // /account/register
                ]
            }
        ]
    })

    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{},
       // 挂载路由对象
       router
    });
</script>

Em seguida, defina o componente:

Não apenas para colocar um <router-view>na área de gerenciamento da instância do Vue, mas também para colocar uma <router-view>rota aninhada
dentro do <router-view>componente.O conteúdo dentro do componente mostra o conteúdo do subcomponente

Veja o seguinte exemplo:

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

Quando você clique na guia log caminho vue-router é correspondente a um /accountcaminho dentro do objeto de roteamento loginquando o sub-rota
na montagem <router-view></router-view>irá mostrar pré-definido ( {path:"login",component:login}) do login montagem

/ account / login representa a
costura do caminho de login na rota / conta

<!-- 定义组件的内容 -->
<template id="tmpl">
	<div>
		<h1>账户管理</h1>
		
		<router-link to="/account/login">登录</router-link>
		<router-link to="/account/register">注册</router-link>
		
		<!-- 子路由的内容显示在此处 -->
		<router-view></router-view>
	</div>
</template>


<!-- 实例管理区 -->
<div id="app">
	<router-link to="/account">前往账户管理</router-link>

	<!-- 父路由的内容显示在此处 -->
	<router-view></router-view>
</div>

---