Vue中路由高亮的2种方式

最新推荐文章于 2024-02-04 20:45:28 发布

键盘的打工仔

最新推荐文章于 2024-02-04 20:45:28 发布

阅读量408

点赞数

本文链接：https://blog.csdn.net/weixin_45616246/article/details/105588733

版权

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由高亮的两种方式</title>
    <script src="../../vue/vue-v2.6.11.js"></script>
    <script src="../../vue/vue-router-v3.1.6.js"></script>
    <style>
        .router-link-active {
            color: hotpink;
            font-size: 20px;
            font-style: italic;
        }

        .myactive {
            color: blue;
            font-size: 20px;
            font-style: italic;
        }
    </style>

</head>
<body>
<div id="app">
    <!-- 1.使用vue-router提供的默认的类:router-link-active
        2.在创建VueRouter构造函数的时候,设置 linkActiveClass 的值-->

                    <!--===========================-->
    <!--注意: 当设置了linkActiveClass的值后,router-link-active不再起作用-->
                    <!--===========================-->

    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>
</body>
<script>
    var login = {
        template: '<h1>登录组件</h1>'
    };
    var register = {
        template: '<h1>注册组件</h1>'
    };
    // 当导入了vue-router这个包后,window对象中会有一个VueRouter的构造函数
    var routerObj = new VueRouter({
        // routes: 路由匹配规则数组
        routes: [
            // path: 匹配路径; component: 路径匹配成功后,显示的组件
            // ****注意: component 后面放的是组件对象,不是组件名称****
            {path: '/', redirect: '/login'}, //重定向到login组件
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
        linkActiveClass: 'myactive'
    });
    var vm = new Vue({
        el: '#app',
        // 将路由注册到Vue实例中
        router: routerObj
    });
</script>
</html>

键盘的打工仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中路由高亮的2种方式

请陛下批阅<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由高亮的两种方式</title> <script src="../../vue/vue-v2.6.11.js"></script&g...
复制链接

扫一扫