87,904
社区成员
发帖
与我相关
我的任务
分享Vue-Router 问题
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js" ></script>
</head>
<body>
<div id='app'>
<!-- <router-link to='/login?id=10'>登录</router-link> 路由传参方式一 -->
<!-- <router-link to='/login/12'>登录</router-link> -->
<!-- 路由传参方式二 -->
<!-- <router-link to='/register'>注册</router-link> -->
<!-- 这是Vue-router提供的元素，用来当作占位符，将来路由规则匹配到的组件，就会展示到这个位置 -->
<router-link to='/account'>Account</router-link>
<!-- <transition mode="out-in"> -->
<router-view></router-view>
<!-- </transition> -->
</div>
<template id="tmp1">
<div>
<h1>这是个Account组件</h1>
<router-link to='/account/login'>登录</router-link>
<router-link to='/account/register'>注册</router-link>
</div>
</template>
<script>
//真要注意，定义路由时，有先后顺序，先定义模板，后写路由，再加载到Vue实例中，否则出错了找不到原因。
var account={
template:'#tmp1'
}
var login = {
template:'<div><h1>登录组件</h1></div>'
}
var register = {
template: '<div><h1>注册组件</h1></div>'
}
var router = new VueRouter({
routes: [
{
path:'/account',
component:account,
children:[
{path:'login', component:login },
{path:'register', component:register}
]
},
// {path:'/account/login', component:login },
// {path:'/account/register', component:register}
]
})
var vm = new Vue({
el: '#app',
router:router
})
</script>
</body>
</html>
问题，在嵌套使用时，第一层的组件显示正常，第二层的组件显示异常。无法得到第二层的组件，路由写到第一层，组件又正常。
不知道是那的错误，页面又没有提示，Vue-tools也没有提示。
...全文
请发表友善的回复…
发表回复
e_zhiwen 2019-05-16
- 打赏
- 举报
二楼正解。上面的发贴是没有看清，错误理解。e_zhiwen 2019-05-16
- 打赏
- 举报
注意下我把嵌套路由改成 同级路由 登录 和注册 组件就正常显示了，我查过的cn.vuejs.org上的资料也没找到原因。谁能在执行下看下结果。
e_zhiwen 2019-05-16
- 打赏
- 举报
有router-view的呀，第一层的路由可以打开的，是第二层嵌套的，点击 注册 或 登录 的链接时， 第二层组件不显示。
讨厌走开啦 2019-05-15
- 打赏
- 举报
第一层路由的html模版里没有router-view导致第二层路由显示不了？
