Vue routing: how do you know to switch to that router-view after the route is hopped?

Application scenarios

try to reconstruct traditional pages with vue 2.x for the first time. Create a project using vue init webpack xxx.

after logging in, there is a button on the index page to switch the page to signin, and return to index after the signin operation. As far as I understand it, there should be an upper page that provides < router-view >, calling this router-view view1. View1 is used to switch between index and signin in the < template > of the upper page.

there is a navigation bar in index that allows the content area to switch between different displays such as page1,page2. I understand that there should also be a < router-view > in index"s < template > to switch between page1 and page2, that this router-view is called view2.

after entering page1, there is a sidebar, which allows the content area to switch to different displays such as content1,content2. I understand that there should also be a < router-view > in page1"s < template > to switch between content1 and content2, that this router-view is called view3.

expected

index and signin can be switched in view1, page1 and page2 can be switched in view2, and content1 and content2 can be switched in view3.
these three switching entries exist on the same page.

question

from the display area: view1 > view2 > view3. After reading the documents of general routing, nested routing and named routing, I feel that I can"t find the design method, this.$router.push (".") How do you know which view change should be driven?
or is this situation not suitable for this.$router.push? should routing be implemented in other ways?

Vue-router vue.js
Sep.16,2021
There is no problem with the idea of

. When routing push, which view change is driven depends on your own routing structure when creating the route. As you said, the scenario can roughly define the routing structure as follows 

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

Route jump means push will change according to the path driver of your push.

Thank you for answering. Later, many attempts have found that there is a misunderstanding in the original understanding. How to jump is not determined by template and script, but is designed and configured in router/index.js. Template and script should cooperate with the design and implementation of index.js. Here is an example:
https://jsfiddle.net/keag65tw/

Previous: The problem of cookie algorithm

Next: Vue starts babel to report an error

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3c33a-2c30c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3c33a-2c30c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?