22-设置路由高亮显示方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<style>
.router-link-active,.myactive{
color: red;
font-weight: 800;
font-style:italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<!--<a href="#/login">登录</a>-->
<!--<a href="#/register">注册</a>-->
<!--默认渲染为a标签 也可设置为span标签-->
<!--tag设置标签-->
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<!--路由容器占位符-->
<router-view></router-view>
<script>
var login={
template:"<h1>登录组件</h1>"
}
var register={
template:"<h1>注册组件</h1>"
}
// Vue.component("login",{
// template:"<h1>登录组件</h1> "
// })
var routerObj = new VueRouter({
//route //表示路由匹配规则
routes:[//每个路由规则都是一个对象，对象身上有两个必备属性
//path表示监听哪个路由链接地址
//component 展示属性对应的组件
// {path:"/",component:login}, //可展示默认组件 但是不推荐
{path:"/",redirect:"/login"}, //重定向 可展示默认组件
// 404:在路由规则的最后一个规则，写一个强大的匹配
// ｛path:"*",component:notFoundVue｝
{path:"/login",component:login},
{path:"/register",component:register}
],
linkActiveClass:"myactive" //改变类名
})
var vm=new Vue({
el:"#app",
data:{},
methods:{},
router:routerObj
})
</script>
</body>
</html>
写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
<style>
.myactive{
color: red;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/zhuce">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template:'<h1>登录组件</h1>'
}
var zhuce = {
template:'<h1>注册组件</h1>'
}
var router= new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/zhuce',component:zhuce}
],
linkActiveClass:'myactive'
})
var vm= new Vue({
el:'#app',
data:{},
router:router,
methods:{}
})
</script>
</body>
</html>
3685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
