极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<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:'#box',
methods:{
add(){
alert(1)
this.$router.push({
path: '/user/username'
})
},
add1(idd){
alert(2)
this.$router.push({
path: '/user/1'
})
}
}
})
</script></body>
</html>
点击按钮pushusername或者pushidd都会显示idd组件，无法显示出来pushusername组件。但是浏览器地址栏会正常显示路由的地址，如下所示：
点击pushusername时显示#/user/username
点击pushidd时显示#/user/1
但是如果不适用参数传递:id配置路由的话就可以正常切换
希望哪位大佬赐教
html5
我觉得是因为username也可以作为:id这个参数值传入，所以后面的/username就不会去匹配了。把username那个路由配置放在:id的前面，应该就可以了