解决“vue-router子路由默认视图不显示”问题
2018-09-05 18:03
1801 查看
今天在看Vue学习视频,老师讲解vue-router多级路由的使用,在写完视频里的例子后,自己测试发现一个小问题(当时视频里没有提及),我是用name实现的路由之间的切换,其中一个有子路由,发现子路由的默认显示没有了(第一次默认有,第二次点击就没有了),又发现控制台有警告提示,所以我百度想要解决问题。很幸运很快找到解决方案:
针对vue-router子路由默认视图不显示这个问题,要有默认子路由,那父路由的名字name得去掉
下面是代码:(需要自己下载Vue.js和Bootstrap结合代码查看效果,图片自行更换,注意路径,路径正确可以直接运行)
[code]<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>22-Vue-router的多级使用</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <script type="text/javascript" src="Vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> <style> body{ background: #e8e8e8; } </style> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="row"> <div class="col-md-2 col-md-offset-2"> <div class="list-group"> <!-- 使用router-link组件来导航 --> <!-- 通过传入‘to’属性指定链接 --> <!-- router-link 默认会被渲染成一个a标签 --> <router-link class="list-group-item" to='/h5'>HTML5学院</router-link> <!-- 针对vue-router子路由默认视图不显示这个问题,要有默认子路由,那父路由的名字name得去掉 --> <router-link class="list-group-item" :to="{name: 'java'}">Java学院</router-link> <router-link class="list-group-item" :to="{name: 'python'}">Python学院</router-link> </div> </div> <div class="col-md-6"> <div class="panel"> <div class="panel-body"> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </div> </div> </div> </div> </div> </div> </div> <template id="h5"> <div> <h1>HTML5</h1> <p>HTML5特别好</p> <img src="img/1.jpg" width="300" alt=""> <div> <ul class="nav nav-tabs"> <router-link to="/h5/basic">基础班</router-link> <router-link to="/h5/big">大神班</router-link> </ul> </div> <div> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </div> </template> <template id="basic"> <div> <h3>基础班</h3> <p>快速入门通道</p> <img src="img/1.jpg" width="100" alt=""> </div> </template> <template id="big"> <div> <h3>大神班</h3> <p>精通HTML5学习</p> <img src="img/2.jpg" width="100" alt=""> </div> </template> <template id="java"> <div> <h1>Java</h1> <p>Java需要掌握的知识很多</p> <img src="img/2.jpg" width="300" alt=""> </div> </template> <template id="python"> <div> <h1>Python</h1> <p>Python现在特别火爆</p> <img src="img/1.jpg" width="400" alt=""> </div> </template> <script type="text/javascript"> // 1.创建组件 const Html5 = Vue.extend({ template: '#h5' }); const Basic = Vue.extend({ template: '#basic' }); const Big = Vue.extend({ template: '#big' }); const Java = Vue.extend({ template: '#java' }); const Python = Vue.extend({ template: '#python' }); // 2.定义路由 const routes = [ { path: '/h5', component: Html5, children: [ {path:'basic', component: Basic}, //不写 ‘/’ {path:'big', component: Big}, // 配置根路由 {path:'/', redirect: 'basic'} ] }, {path:'/java', component: Java, name: 'java'}, {path:'/python', component: Python, name: 'python'}, // 配置根路由 {path:'/', redirect: '/h5'} ]; // 3.创建路由实例 const router = new VueRouter({ // routes: 'routes' routes }); // 4.创建Vue的实例,并挂载 new Vue({ router }).$mount('#app'); </script> </body> </html>
Vue.js下载地址:(进入后找到下载位置右键将链接保存文件)
https://cn.vuejs.org/v2/guide/installation.html
阅读更多
相关文章推荐
- 解决vue脚手架项目打包后路由视图不显示的问题
- 解决vue-router进行build无法正常显示路由页面的问题
- vue.js默认路由不加载linkActiveClass问题的解决方法
- vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
- vue脚手架项目打包后路由视图不显示问题
- 解决vue-router在同一个路由下切换,取不到变化的路由参数问题
- vue里面解决ueditor显示的问题
- 解决htc one等手机actionbar默认显示的问题
- vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
- 解决vue 路由变化页面数据不刷新的问题
- 解决Vue项目在IE浏览器中显示空白的问题
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- tabbarcontroller 内嵌导航 控制器,2层push hide tabbar 后 ,第二层直接返回根视图控制器选择tabbarcontroller的其它vc 无法显示 tabbar的 问题解决方案
- 解决使用vue.js路由后失效的问题
- 解决select2在bootstrap的modal中默认不显示的问题
- iOS7修改UITabBar文本颜色以及解决自定义选中图片显示为默认蓝色的问题
- Vue路由history模式踩坑记录:nginx配置解决404问题
- 解决Vue.js由于延时显示了{{message}}引用界面的问题
- 解决使用Vue.js显示数据的时,页面闪现原始代码的问题