一、路由激活默认类
被选中的路由会多出类
router-link-active，vue-router提供的激活路由的默认类。
需要设置路由选中的样式，即可以使用链接激活时的CSS类名设置样式。
<style>
.router-link-active{
color: red;
text-decoration: none;
}
</style>
二、修改路由激活默认类
路由激活时的默认类名可以通过路由构造选项linkActiveClass属性来全局配置。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入vue路由的包 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
.myactive{
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<div id='app'>
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<template id="templ1">
<h1>登陆组件</h1>
</template>
<script>
var login = {
template:'#templ1'
}
var register={
template:'<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
linkActiveClass:'myactive', //修改路由激活的默认类名
routes : [
{
path:'/', //根路径
redirect:'/login' //重定向url地址
},{
path:'/login', //路由路径
component:login //此属性值必须是组件的模板对象，不能是组件名称
} ,{
path:'/register',
component:register
}
]
});
var vm = new Vue({
el: "#app",
data: {
},
router :routerObj
});
</script>
</body>
</html>
网友评论