< 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
but if parameter passing is not applicable: id can switch normally if routing is configured
which boss do you want to give advice