Route nesting through vue-router in Vue

With the single-page application Vue (SPA) requires complicated routing nested
routing nesting allows more complex user interface and nested components

If you are not familiar with Vue routing, please refer to my other blog: Vue Learning Tour Part9: Using vue-router to achieve front-end routing and parameter passing

Route nesting means that there are sub-components inside the routing component, which is suitable for many business scenarios

The steps to achieve route nesting are relatively simple

First define the subroutine in the routing object:

Sub-route path name should be noted: the front sub-path routing path can not slash
sub-path routing is automatically put together in front of the parent routing path

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

Then define the component:

Not only to place one <router-view>in the management area of ​​the Vue instance, but also to place a <router-view>nested route
inside the <router-view>component. The content inside the component shows the content of the subcomponent

Take the following example:

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

When you click log tab vue-router path is matched to a /accountpath inside the routing object loginwhen the sub-route
in the assembly <router-view></router-view>will show pre-defined ( {path:"login",component:login}) of the assembly login

/ account / login represents the
stitching of the login path in the route / account

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

---