vue路由：路由跳转后怎么知道切换到那个router-view中

Question

应用场景

首次尝试用vue 2.x重构传统页面。使用vue init webpack xxx 创建项目。

登陆后index页面上有按钮可以切换页面到signin，在signin操作结束后可以退回index。按我的理解应该有个上层页面提供<router-view>，称这个router-view为view1。view1在上层页面的<template>中做切换index和signin用。

在index中有个导航条，可以让内容区切换不同的显示如page1,page2。我理解在index的<template>里还应该有个<router-view>用来切换page1和page2，称这个router-view为view2。

进入page1后有侧边栏，可以让内容区切换不同的显示如content1,content2。我理解在page1的<template>里也应该有个<router-view>用来切换content1和content2，称这个router-view为view3。

预期

index和signin可以在view1切换，page1和page2可以在view2切换，content1和content2可以在view3切换。
这3个切换的入口在同一个页面上存在。

问题

从显示区域看：view1>view2>view3。看了普通路由、嵌套路由、命名路由的文档，感觉没有找到设计方法，this.$router.push('...')怎么知道应该驱动那个view变化呢？
还是这种情况不适合this.$router.push应该用其他方法实现路由？

Answer 1

思路是没有问题的，路由push时驱动哪个view变化是看你自己在创建路由时的路由结构，如你所说的场景大致可定义路由结构是这样的

[
    {
        path:"signin"
    },{
        path:"index",
        children:[
            {
                path:"page1",
                children:[
                    {
                        path:"content1"
                    },{
                        path:"content2"
                    }
                ]
            },{
                path:"page2"
            }
        ]
    }
]

路由跳转即push时会根据你push的path驱动相应view变化

Answer 2

谢谢回答。后来尝试多次发现原来的理解有误区，怎么跳转不是由template和script决定的，而是在router/index.js里设计配置好的，template和script要配合index.js的设计实现。这里有个例子：
https://jsfiddle.net/keag65tw/