Vueのvue-routerを介したネストのルート

複雑必要単一ページアプリケーションヴュー（SPA）と、ネストされたルーティング
経路のネストは、より複雑なユーザインタフェースとネストされたコンポーネントを可能にします

Vueルーティングに詳しくない場合は、他のブログを参照してください：Vueラーニングツアーパート9：vue-routerを使用してフロントエンドルーティングとパラメーター受け渡しを実現する

ルートのネストとは、ルーティングコンポーネント内にサブコンポーネントがあり、多くのビジネスシナリオに適していることを意味します

ルートのネストを実現する手順は比較的簡単です

まず、ルーティングオブジェクトでサブルーチンを定義します。

子ルートのパスの名前に注意してください。子ルートのパスの前にスラッシュを付けることはできません
。子ルートのパスは、親ルートのパスに自動的にスペルされます

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

次に、コンポーネントを定義します。

管理領域Vueのインスタンスに配置するだけ<router-view>のコンポーネントの内部に配置される必要がある<router-view>ネストされたルーティングを達成するために、
内部部品を<router-view>サブアセンブリであることが示されています

次の例を見てください。

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

ログ]タブをクリックするとVUE-ルータパスがに一致している/accountルーティングオブジェクト内のパスloginのサブルート
アセンブリでは、<router-view></router-view>事前定義された（表示されます{path:"login",component:login}）組立ログイン

/ account / loginは、ルート/アカウント内のログイン
パスのつなぎ目を表します

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

---