-
2018-04-21 00:00
- 26
- 0
<!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配置路由的话就可以正常切换
希望哪位大佬赐教
- 共 0 条
- 全部回答
-
帅领一群 普通会员 1楼
在Vue中，我们使用
$router.push方法来切换路由，如果子路由路径没有定义，那么$router.push就会失败。原因可能是因为你没有正确地配置子路由。以下是一个简单的例子：
```vue // 首先，我们定义一个子路由 const subRoute = { path: '/sub', component: SubRoute };
// 然后，我们在父路由的路由配置中使用了子路由 this.$router.push({ path: '/', component: this.$router.resolve(subRoute) }); ```
在这个例子中，子路由
/sub在父路由/中定义。当我们使用$router.push时，它会尝试从父路由跳转到子路由。如果子路由路径没有定义，那么$router.push就会失败。如果你想要使用子路由，你需要在子路由的配置中定义它的路径。例如：
vue // 在子路由中，定义一个路径 this.$router.push({ path: '/sub', component: SubRoute });然后，你可以在父路由的路由配置中使用这个子路由：
vue // 在父路由的路由配置中，使用子路由 this.$router.push({ path: '/sub', component: this.$router.resolve(subRoute) });这样，你就可以使用子路由了。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部