koa里面的koa-router如何实现点击链接对对应菜单加颜色

发布于 1周前 作者 vueper 来自 分享

通过koa-router跳转的 但是这么跳转时候给他一个样式或者类名如何实现


router.get('/contantus', async ctx => {
  console.log(ctx.response)
  await ctx.render('contantus', {title: "联系我们"})
})

router.get('/products', async ctx => {
  await ctx.render('products', {title: "产品列表"})
})

这里是HMTL

 <ul class="nav-list">
      <li>首页</li>
      <li class={{active}}><a href="/products">产品</a> </li>
      <li>解决方案</li>
      <li><a href="/contantus">联系我们</a> </li>
    </ul>
用的是koa-nunjucks-2模板引擎 本来我是传过来一个active但是所有的都变了
有什么方法可以加入样式
1 回复

1、pathname就是路由的地址

2、$value.url就是数据库循环出来当前菜单对应的一个url地址

   <div class="nav">
            <ul class="clear">

                {{each nav}}
                    <li>
                        <a href="{{$value.url}}" {{if pathname==$value.url}} class="active" {{/if}}>{{$value.title}}</a>
                    </li>

                {{/each}}


            </ul>
        </div>
回到顶部