精华内容
下载资源
问答
  • vue 子路由的默认显示

    千次阅读 2020-02-19 01:06:14
    vue 子路由的默认显示 可以用来写菜单栏与显示页面的关系 1.重定向的名字和子路由的path属性一致 { path: "/index", name: "index", redirect: "console", component: () => import("../views/index.vue"), ...

    vue 子路由的默认显示

    可以用来写菜单栏与显示页面的关系

    1.重定向的名字和子路由的path属性一致

    {
        path: "/index",
        name: "index",
        redirect: "console",
        component: () => import("../views/index.vue"),
        children: [
            //这里添加main里面和nav链接的路由
          {
            path: "/console",
            name: "console",
            component: () =>
                import("../views/console/console.vue")
          }
        ]
      }
    

    2.在模板中运用

    <template>
        <div id="main-wrap">
            <router-view></router-view>
        </div>
    </template>
    
    展开全文
  • 主要为大家详细介绍了vue router路由嵌套不显示的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下vue-router 路由嵌套不显示问题
  • vue解决子路由不显示favicon.ico图标

    千次阅读 2021-03-03 23:34:32
     在vue中添加子路由后,子路由不显示favicon.ico图标,而在其他路由中显示其图标。 解决办法 在vue-cli中build目录中找到webpack.dev.conf.js中更改其对应部分,如下代码: plugins: [ new HtmlWebpackPlugin({ ...

    前言

     在vue中添加子路由后,子路由不显示favicon.ico图标,而在其他路由中显示其图标。

    解决办法

    在vue-cli中build目录中找到webpack.dev.conf.js中更改其对应部分,如下代码:

    plugins: [
        
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true,
          /* 解决vue中使用子路由不显示favicon.ico */
          /* 加载目录下的favicon.ico图标 */
          favicon: path.resolve('./static/img/icon/favicon.ico')
        }),
       
      ]
    
    

    目录结构

    在这里插入图片描述

    展开全文
  • vue:路由嵌套时只有一个子路由时父级路由不显示问题 我是在使用vue-admin-beautiful后台管理模板的项目中,在路由中使用权限控制路由(菜单)的显示。 父级路由(菜单)下有多个子路由(菜单)的父级都可以正常显示...

    我是在使用vue-admin-beautiful后台管理模板的项目中,在路由中使用权限控制路由(菜单)的显示。

    父级路由(菜单)下有多个子路由(菜单)的父级都可以正常显示,只有父级下是一个子路由(菜单)的父级路由(菜单)不显示。因为只有一个子路由(菜单),是由父级隐藏不显示属性引起的。在父级设置alwaysShow: true,就可以保证在权限只有一个子菜单的父级显示。如下图:
    在这里插入图片描述

    展开全文
  • 今天在看Vue学习视频,老师讲解vue-router多级路由的使用,在写完视频里的例子后,自己测试发现一个小问题(当时视频里没有提及),我是用name实现...针对vue-router子路由默认视图不显示这个问题,要有默认子路由,...

    今天在看Vue学习视频,老师讲解vue-router多级路由的使用,在写完视频里的例子后,自己测试发现一个小问题(当时视频里没有提及),我是用name实现的路由之间的切换,其中一个有子路由,发现子路由的默认显示没有了(第一次默认有,第二次点击就没有了),又发现控制台有警告提示,所以我百度想要解决问题。很幸运很快找到解决方案:

    针对vue-router子路由默认视图不显示这个问题,要有默认子路由,那父路由的名字name得去掉

    下面是代码:(需要自己下载Vue.js和Bootstrap结合代码查看效果,图片自行更换,注意路径,路径正确可以直接运行)

    <!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 

     

    展开全文
  • 点击主路由想让主路由显示高亮就要在底部的footer文件里 写好主路由下的子路由比如 交易模块下又三个子路由 <div class="tab-item" id="teshubox" @click="switchTo('/transaction')"> <div class="slot...
  • 关于Vue-router子路由不显示的一个坑

    千次阅读 2019-07-23 18:24:14
    父子路由是嵌套关系,所以能跳过父组件直接显示子组件。例如我有如下index.js:`` import Vue from 'vue' import VueRouter from 'vue-router' //引入两个组件 import recomView from '../comp...
  • 下面小编就为大家分享一篇vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue 父路由和子路由

    2021-03-01 19:32:28
    Vue 父路由和子路由 以黑马项目二leyou商城的前端界面为例 我们在访问localhost:9001时候首先会进入index.html和读取main.js main.js里面包含了new Vue({}),我们看一下里面参数:router。 router是路由,负责把...
  • vue 默认子路由不生效

    千次阅读 2019-02-27 15:42:09
    当一个路由配置文件里有定义了两个路由时,默认子路由生效 export default [ { path: ‘/store’, component: () =&amp;amp;amp;gt; import(’@/page/store/index’), name:“xxxxx”, children: [ { path: ...
  • vue二级路由不显示页面bug

    千次阅读 2021-01-11 14:04:09
    vue路由跳转不显示页面bug 子路由页面path需要+ ‘/’ 一级路由path需要+ ‘/’, 记得写 <router -view />
  • vue子路由跳转实现tab选项卡

    千次阅读 2019-03-06 10:44:38
    现在很多的后台管理系统都采用tab选项卡的布局,左边是导航栏固定,右边是对应的页面,每次点击左边的导航标题,只有右面的对应页面再切换,而vue要做tab选项卡,推荐使用&lt;router-link&gt;&lt;/...
  • Vue路由默认子路由

    千次阅读 2019-09-24 10:42:35
    vue路由中,如果存在二级路由的话,那么该路由下的所有子路由默认都不会自己显示的,如果想要默认展示子路由的话就需要按照如下配置 routes: [ {path: '/system-settings', component: resolve => require(...
  • 最近利用vue第三方UI MuseUI开发webapp,然后在导航栏这里出现了问题,我需要在导航栏上的几个路由显示底部导航栏,在其他路由不显示,就这个问题,MuseUI的底部导航栏直接加载在app.vue里面,会每个页面都有...
  • 我们需要实现的效果,父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失. 在实际开发中,可能遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了 原因: 1、子路由router-...
  • ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190805235858951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,...[在这里插入图片描述]各位大神,为啥我这个子路由跳转到呢,找到原 ...
  • vue子路由的一个坑

    2021-01-03 02:09:02
    路由信息如下 下面是错误的路由 export default new VueRouter({ routes: [ { path: '/', children: [ { path: 'login', component: Login } ] } ]
  • vue-入坑–嵌套路由导致页面跳转为空问题(页面不显示内容) 遇到的问题 使用嵌套子路由切换页面,地址栏有变化,但是页面内容没有显示(一片空白)。 上代码~~ 嵌套子路由代码 src->router->index.js //......
  • 一、在子路由前面加上父路由路径 { path: "/foundMusic", component: FoundMusic, children: [ { path: "/foundMusic/newdisc", component: NewDisc }, { path: "/foundMusic/radio", component: Radio }, { ...
  • Vuevue-router 路由嵌套不显示问题

    万次阅读 2017-03-12 19:29:51
    Vuevue-router 路由嵌套1、路由嵌套,vue2.0 ...一直都是==只能渲染一级路由,子路由没有效果,==,查了一推资料,帖子说:子路由多写了/, 会默认从根目录开始匹配,我试着也删除掉这些东西,但是后来发现,我的
  • vue子路由的配置

    2020-09-28 09:11:15
    vue子路由的配置 1.需求:1级路由配置子路由,在Book下配置两个子路由 2.第一步在router文件下的index.js文件中的对应页面配置它的子路由(二级路由) 3.①在父页面中写好子路由页面②完善子页面 4页面显示子...
  • 一路由import Vue from ‘vue’ import Router from ‘vue-router’ import HelloWorld from ‘@/components/HelloWorld’ import Login from ‘@/components/Login’ import GoodsList from ‘@/views/GoodsList’ ...
  • 1.在router中设置meta对象,然后在App.vue里面根据navShow属性来判断是否显示底部导航栏 { path: '/consult', name: 'consult', component: Consult, meta: { navShow: true, cname: '一级页面' }, }, { ...
  • 细节解决成败,一个小疏忽就会导致花费大量的时间去定位BUG: 问题:如题,控制台没有报错 分析:动态路由写的没问题,大概是问题出在路由寻址时找到具体的组件 ...加上尾巴上的参数:id,成功跳转显示相应内容 ...
  • vue监控路由变化 vue路由配置

    千次阅读 2018-04-20 15:18:47
    在进行vue的开发中,有时候会出现路由路由参数拼接乱套的问题,下面我针对我遇到的路由问题进行小小的阐述 vue路由带参数,路由有一个$route对象 在使用了 vue-router 的应用中,路由对象会被注入每个组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,883
精华内容 5,953
关键字:

vue子路由内容不显示

vue 订阅