Nuxt项目路由根组件管理，切换路由标签高亮设置

做过vue路由的人应该都熟悉当我们访问每一个路由时他会将内容注入到router-view标签上而这个我们通常会发展跟组件中

根组件其实是 .nuxt目录下的 layouts中的default.vue组件
在这里插入图片描述
我们将代码改成

<template>
  <div>
    app
    <Nuxt />
  </div>
</template>

我们在节点上加了个文本 app
在这里插入图片描述

你会发现无论怎么切换路由这上面都是一样的因为他写在根组件上了

这里可以简单总结为 default.vue 是Nuxt项目的根组件而 Nuxt标签就相当于 router-view标签

Nuxt的路由跳转标签叫 nuxt-link 例如我们在default.vue上写一个切换路由就可以这样

<template>
  <div>
      <nuxt-link to = "/">首页</nuxt-link>
      <nuxt-link to = "/engineering">工程界面</nuxt-link>
      <Nuxt />
  </div>
</template>

在这里插入图片描述
然后我们点一下工程界面

也是成功完成了跳转

然后我们回到首页右键查看源码
在这里插入图片描述
可以看到还是直接帮我们读成a标签的爬虫也可以爬进来
然后加上我们 seo常用的 rel配置

<nuxt-link rel = "nofollow External noopener noreferrer" to = "/">首页</nuxt-link>

在这里插入图片描述
当然我只是为了说可以这样设置这些不要乱用哦都有对应的意思的
nofollow : a 标签rel值告诉搜索引擎该页面不需要分享权重
External : a标签rel值声明本网页属于外部网址
noopener noreferrer : rel值，当a设置了_blank时能规避钓鱼漏洞

和vue的导航标签一样可以通过 tag 改变类型例如我们这样写

<nuxt-link tag="span" to = "/">首页</nuxt-link>
<nuxt-link tag="span" to = "/engineering">工程界面</nuxt-link>

我们这里声明他们是 span 标签看界面
在这里插入图片描述
这里真就成立span

但我们发现变成span之后点击之后就没有高亮显示的效果了

我们直接将代码修改如下

<template>
  <div>
      <nuxt-link tag="span" to = "/view" activeClass = "active">视图</nuxt-link>
      <nuxt-link tag="span" to = "/engineering" activeClass = "active">工程界面</nuxt-link>
      <Nuxt />
  </div>
</template>

<style>
.active{
      
      
  color: red;
}
</style>

这里我们设置了当前被选的路由 class为active active类加了个红色字体的样式
在这里插入图片描述

高亮的效果他就出来了

Nuxt项目路由根组件管理，切换路由标签高亮设置

猜你喜欢