Ruta de anidamiento a través de vue-router en Vue

Con la aplicación de una sola página Vue (SPA) requiere complicado enrutamiento anidada
de anidación de enrutamiento permite que la interfaz de usuario más compleja y componentes anidados

Si no está familiarizado con el enrutamiento de Vue, consulte mi otro blog: Vue Learning Tour Parte9: Uso de vue-router para lograr el enrutamiento front-end y el paso de parámetros

El anidamiento de ruta significa que hay subcomponentes dentro del componente de enrutamiento, lo que es adecuado para muchos escenarios empresariales

Los pasos para lograr la anidación de ruta son relativamente simples

Primero defina la subrutina en el objeto de enrutamiento:

Sub-ruta nombre de la ruta hay que señalar: la sub-camino de entrada de ruta de acceso no puede reducir
el enrutamiento de ruta secundaria se pone automáticamente juntos delante de la ruta de enrutamiento de los padres

<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>

Luego defina el componente:

No solo para colocar uno <router-view>en el área de administración de la instancia de Vue, sino también para colocar una <router-view>ruta anidada
dentro del <router-view>componente. El contenido dentro del componente muestra el contenido del subcomponente

Tome el siguiente ejemplo:

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

Al hacer clic en ficha Registro camino vue-enrutador está adaptado a un /accountcamino dentro del objeto de enrutamiento logincuando el sub-ruta
en el conjunto <router-view></router-view>mostrará pre-definido ( {path:"login",component:login}) de la entrada de montaje

/ account / login representa la
unión de la ruta de inicio de sesión en la ruta / cuenta

<!-- 定义组件的内容 -->
<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>

---