After vue routes are configured with child routing paths, $router.push cannot switch routes, as shown below


< html lang= "en" >
< head >

<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>

< / head >
< body >

<div id="box">
    <div>
        <router-link to="/home"></router-link>
        <router-link to="/user"></router-link>
    </div>
    <div>
       <router-view></router-view>
    </div>
    <a href="javascript:;" @click="add">pushusername</a>
    <a href="javascript:;" @click="add1">pushidd</a>
</div>
<script>
    //
    var Home={
        template:"<h3></h3>"
    };
    const User={
        template:`<div>
                <h3></h3>
                  <ul>
                    <li><router-link to="/user/username"></router-link></li>
                  </ul>
                  <div><router-view></router-view></div>
                </div>`
    };
    const IDd = {
        template:`<div>
        pushidd
        </div>`
    }
    const username = {
        template:`<div>
        pushusername
        </div>`
    }
    var userdetail = {
        template:"<h3></h3>"
    }
    //
    const routes=[
        {path:"/home",component:Home},
        {path:"/user",component:User,
        children:[
        {
            path:":id",component:IDd
        },
        {
            path:"username",component:username
        }]},
        {path:"*",redirect:"/home"}
    ];
    //
    const router = new VueRouter({
        routes:routes
    });
    //
    new Vue({
        router:router,
        el:"-sharpbox",
        methods:{
            add(){
                alert(1)
            this.$router.push({
                path: "/user/username"
            })
            },
            add1(idd){
                alert(2)
            this.$router.push({
                path: "/user/1"
            })
            }
        }
    })
</script>

< / body >
< / html >

clicking the button pushusername or pushidd will display the idd component, but not the pushusername component. However, the browser address bar will normally display the address of the route, as follows:
display-sharp/user/username when you click pushuserName
display-sharp/user/1

when you click push

but if parameter passing is not applicable: id can switch normally if routing is configured

which boss do you want to give advice


I think it's because username can also be passed in as the parameter: id, so the following / username will not match. Put the username routing configuration in front of: id, and it should be fine


path:':id',component:IDd is not written correctly. Look here:
https://jsfiddle.net/yyx99080.

Youyuxi will personally demonstrate to you:)


if there are / user/1 , / user/2 , / user?id=1 , / user?id=2 of such routes in the vue2 page , you need to refresh the data
by listening $route . Therefore, if you encounter such a jump of the same route, you should do the following

created () {
  this.fetchData()
},
watch: {
  '$route': 'fetchData'
},
methods: {
  fetchData () { ... }
}

if you are interested in the discussion of this issue, please see this issues discussion

.
Menu