27.《VUE之点击链接高亮模式》

最新推荐文章于 2022-04-12 21:28:34 发布

@逆风微笑代码狗

最新推荐文章于 2022-04-12 21:28:34 发布

阅读量158

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_44864082/article/details/106654907

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

借助router插件，他提供了一个专门给被选中的router-link绑定样式的类名！

.router-link-avtive

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUE之点击链接高亮模式</title>
		<!--引入文件-->
		<script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
	</head>
	<style>
		.router-link-active{
			color: blue;
			font-weight: bold;
		}
	</style>
	<body>
		<!--
        	vue-router插件提供的特殊标签，它可以扮演任何标签
        	to:套跳转去哪儿，to属性中的路径不在需要#号
        	tag:说明vue-router要体现为哪种标签
        
        -->
		<div id="app">
			<!--<a href="#/article">推荐</a>
			<a href="#/attention">关注</a>
			<a href="#/Comment">评论</a>-->
			
			<router-link to="/article">推荐</router-link>
			<router-link to="/attention">关注</router-link>
			<router-link to="/Comment">评论</router-link>
			
			<!--定义路由的视图区域-->
			<router-view></router-view>
			
		</div>
		<!--制定路由相应的组件-->
		<template id="temp1">
			<div class="panel">推荐文章</div>
		</template>
		
		<template id="temp2">
			<div class="pane2">我的关注</div>
		</template>
		
		<template id="temp3">
			<div class="pane3">我的评论</div>
		</template>
		
		<script>
			//2.注册组件
			var tempArticle={
				template:'#temp1'
			}
			var tempAttention={
				template:'#temp2'
			}
			var tempComment={
				template:'#temp3'
			}
			
			Vue.component('article',tempArticle);
			Vue.component('attention',tempAttention);
			Vue.component('Comment',tempComment);
			//制定路由规则
			var routeRules=new VueRouter({
				//routes属性用于定义规则 规则不止一条
				//每一个元素就是一个路由规则
				routes:[
				   //3.一条路由规则含有两个信息 路径 组件
				   {path:'/article',component:tempArticle},
				   {path:'/attention',component:tempAttention},
				   {path:'/Comment',component:tempComment},
				   {path:'/',redirect:'/article'}
				]
				
			});
			var  vr=new Vue({
				el:'#app',
				//4.把路由规则注册到vr实例中
				router:routeRules 
			})
		</script>
	</body>
</html>

如果不喜欢这个，可以任意类名定义高亮样式，然后绑定到路由规则的linkActiveClass属性上，具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUE之点击链接高亮模式</title>
		<!--引入文件-->
		<script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
	</head>
	<style>
		.aaa{
			color: blue;
			font-weight: bold;
		}
		/*.router-link-active{
			color: blue;
			font-weight: bold;
		}*/
	</style>
	<body>
		<!--
        	vue-router插件提供的特殊标签，它可以扮演任何标签
        	to:套跳转去哪儿，to属性中的路径不在需要#号
        	tag:说明vue-router要体现为哪种标签
        
        -->
		<div id="app">
			<!--<a href="#/article">推荐</a>
			<a href="#/attention">关注</a>
			<a href="#/Comment">评论</a>-->
			
			<router-link to="/article">推荐</router-link>
			<router-link to="/attention">关注</router-link>
			<router-link to="/Comment">评论</router-link>
			
			<!--定义路由的视图区域-->
			<router-view></router-view>
			
		</div>
		<!--制定路由相应的组件-->
		<template id="temp1">
			<div class="panel">推荐文章</div>
		</template>
		
		<template id="temp2">
			<div class="pane2">我的关注</div>
		</template>
		
		<template id="temp3">
			<div class="pane3">我的评论</div>
		</template>
		
		<script>
			//2.注册组件
			var tempArticle={
				template:'#temp1'
			}
			var tempAttention={
				template:'#temp2'
			}
			var tempComment={
				template:'#temp3'
			}
			
			Vue.component('article',tempArticle);
			Vue.component('attention',tempAttention);
			Vue.component('Comment',tempComment);
			//制定路由规则
			var routeRules=new VueRouter({
				//routes属性用于定义规则 规则不止一条
				//每一个元素就是一个路由规则
				routes:[
				   //3.一条路由规则含有两个信息 路径 组件
				   {path:'/article',component:tempArticle},
				   {path:'/attention',component:tempAttention},
				   {path:'/Comment',component:tempComment},
				   {path:'/',redirect:'/article'}
				],
				linkActiveClass:'aaa'
				
			});
			var  vr=new Vue({
				el:'#app',
				//4.把路由规则注册到vr实例中
				router:routeRules 
			})
		</script>
	</body>
</html>

谢谢访问！！！

@逆风微笑代码狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
27.《VUE之点击链接高亮模式》

借助router插件，他提供了一个专门给被选中的router-link绑定样式的类名！.router-link-avtive<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>VUE之点击链接高亮模式</title>  <script type="text/javascript" src="js/vue
复制链接

扫一扫