vue 嵌套路由，router-link-active的问题

最近开发的过程中，遇到一个嵌套路由的问题，需求是这这样的，

首页三个路由   a    b    c

路由写法是

export default new Router({  routes: [    // {    //   path: ‘/‘,    //   component: ‘‘    // },    // {    //   path: ‘/history-grade‘,    //   component: ‘‘    // },    {      path: ‘/source-setting‘,      component: setting,      children: [        {          path:‘‘,          component: baseSource        },        {          path: ‘baseSource‘,          component: baseSource        },        {          path: ‘contact‘,          component: contact        },        {          path: ‘push‘,          component: push        },        {          path: ‘account‘,          component: account        }      ]    }  ]})

然后c路由下面 又分为其他的不同功能，由此生出1,2,3 路由，因此是c路由下嵌套 3个路由，在点击三个主路由的时候，会有一个active的样式，如下图

一开始我是用vue里面router-link-exact-active来做的，但是因为有一个嵌套路由

在子路由点击的时候，要保证此时当前的激活路由还处于active状态，显然如果用router-link-exact-active 来做的话 ，就不能实现了。即在你点击子路由的时候，主路由的active样式就消失了，

多次尝试之后

<router-link to="/" exact>比赛数据</router-link><router-link to="/history-grade">历史成就</router-link><router-link to="/source-setting">资料设置</router-link>

router-link-active 表示当前路由被激活的时候，添加的属性
在第一个‘/‘添加exact之后，默认是false，发现，在点击子路由的时候，被激活的’资料设置‘这个路由存在router-link-active属性，所以把router-link-exact-active改为router-link-active 解决了这个样式的问题。

加上exact 属性 表示 <!-- 这个链接只会在地址为 / 的时候被激活 -->，不加的时候，每个路由都会激活当前这个路由 ，就是每个路由激活的时候 都会使得
<router-link to="/" exact>比赛数据</router-link>  多一个router-link-active 属性！ 
				


				
时间： 2024-10-08 22:18:45 

		


		


	

	
	

		


		
vue 嵌套路由，router-link-active的问题的相关文章


								

		

			

                vue 嵌套路由
			

		

		

									

				在一个页面中如果想实现三个页面的拼接组成一个页面,这时候就用到嵌套路由了. 第一种方法: 1.顶部页面  /views/Home.vue <template> <el-container> <!-- 顶部 --> <el-header class="headerAll"> <div class="headImage"></div> <!-- <img src=""			

		

	

				

		

			

                vue嵌套路由
			

		

		

									

				在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html,只有一个路由出口 1 <div id="app"> 2 <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> 3 <router-view></router-view> 4 </div> main.			

		

	

				

		

			

                Vue  嵌套路由、路由守卫
			

		

		

									

				嵌套路由 嵌套路由:一个路由配置中嵌套其他的路由配置. 嵌套路由挺常用的,比如导航栏有首页.文章.想法.留言4个模块,我们以嵌套路由的形式集成这些模块,在导航栏中点击对应的条目,就会路由到对应的页面(下方显示对应的页面),和html的<iframe>效果差不多. demo   嵌套路由 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><			

		

	

				

		

			

                Vue的路由Router之导航钩子和元数据及匹配
			

		

		

									

				一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js 复制粘贴页面的所有内容 四.index.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4			

		

	

				

		

			

                vue_路由Router
			

		

		

									

				使用路由 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌 安装 vue项目创建时选择使用路由,项目将自动在根实例中注册 router 选项, 该 router 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$router 访问到 假设vue项目创建没有选择使用路由,手动将路由注册到根实例中 $ npm install vue-router --save 手动创建目录 src/router/index.js			

		

	

				

		

			

                六、Vue Router 嵌套路由
			

		

		

									

				嵌套路由 在入口模板中设置的<router-view>是最顶层的出口.子组件中可以嵌套<router-view>为子路由匹配的出口. const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` } 要在嵌套的出口中			

		

	

				

		

			

                Vue实现路由跳转和嵌套
			

		

		

									

				在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html,只有一个路由出口 [html] view plain copy<div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> <			

		

	

				

		

			

                Vue.js路由管理器 Vue Router
			

		

		

									

				起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>			

		

	

				

		

			

                VUE温习：nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数
			

		

		

									

				一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新dom后执行回调 二.$refs用法 1.ref作用于普通元素——得到dom节点 2.ref作用于子组件——得到组件实例,可使用组件所有方法 3.当v-for用于元素或组件的时候,refs将是包含dom节点或组件实例的数组(想得到单个的ref,只需循环即可) 三.vue组件hover事件模拟 1.m