vue-router4.x中自定义标签及路由激活样式

浅浅的花香味﹌ 2022-09-10 01:17 102阅读 0赞

### 背景介绍 ###

在 `vue-router 3.x` 的时候，`router-link` 标签有一个 `tag` 属性，可以决定 `router-link` 到底会被渲染成什么标签 (默认渲染为 `a` 标签) ，但是从 `vue-router 4.x` 开始，该属性被移除了，而给我们提供了更加具有灵活性的 `v-slot` 插槽的方式来定制渲染的内容；

### 成果展示 ###

![效果展示][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zi_5YW15ZOl5ZOl_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

### 解决方法 ###

#### 核心代码展示 ####

*  `sidebar.vue`
    
        <template>
            <ul class="nav nav-sidebar">
                <router-link to="/heroes" custom v-slot="{ navigate, isActive }" >
                	
                    <li @click="navigate" @keypress.enter="navigate" :class="{ 'active': isActive}" role="link">
                        <a href="#">人物列表</a>
                    </li>
                </router-link>
                ...
            </ul>
        </template>
 *  `routes.js`
    
        import {  createRouter, createWebHashHistory } from 'vue-router'
        import Home from '../components/Home.vue'
        ...
        
        const routes = [
          { 
            path: '/',
            component: Home,
            children: [
              { 
                path: '/',
                component: Heroes
              },
              ...
            ]
          }
        ]
        
        const router = createRouter({ 
          history: createWebHashHistory(),
          routes,
          linkActiveClass: 'active'  // 此行为核心代码, 加上
        })
        
        export default router

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zi_5YW15ZOl5ZOl_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/5e14d540b4e643b994c4ef56e2932144.png