router-link 默认选中路由

router-link 组件在当前路由与其 to 属性所指的路由匹配时会自动添加一个 `.router-link-exact-active` 的类名，这个类名可以用来对当前被选中的路由进行样式设置。

但是，router-link 组件并不会默认选中任何一个路由，因为路由选中的状态是由用户在页面上的操作触发的。如果你想要在页面加载时自动选中某个路由，可以在 mounted 钩子函数中手动触发路由跳转，例如：

mounted() {
  this.$router.push('/some-route');
}

这样就会在页面加载时自动跳转到 `/some-route` 路由，并且 router-link 组件会自动添加 `.router-link-exact-active` 类名进行样式设置。

相关问题

router-link 默认选中第一个

router-link 并不会默认选中第一个，它只是用来在 Vue.js 应用中实现路由导航的组件。在使用 router-link 的时候，需要设置它的 to 属性来指定路由跳转的目标地址，例如：

<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

这样就可以实现跳转到 Home 和 About 页面。如果想要默认选中第一个路由，可以在路由配置中设置默认路由，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

这样，当用户访问根路径时，就会自动跳转到 Home 页面。

<template> <div id="app"> <div class="navbar"> <div class="navs"> <div class="navs_left style_title" style="">供应链溯源系统</div> <div class=" style_text"> <el-menu :default-active="activeMenu"> <el-menu-item index="/one" class="navs_right"> <router-link to="./one">原材料</router-link></el-menu-item> <el-menu-item index="/two" class="navs_right"> <router-link to="./two">物流</router-link></el-menu-item> <el-menu-item index="/three" class="navs_right"> <router-link to="/three">用户</router-link></el-menu-item> </el-menu> <router-view></router-view> </div> </div> </div> </div> </template> <script> export default { data() { return { activeMenu: './one' // 默认选中首页菜单项 } } } </script> <style> .navs { display: flex; justify-content: space-between; align-items: center; height: 10vh; background-color: #67992A; } .navs_right{ margin-right: 50px } .navs_left{ margin-left: 50px } .style_text{ font-size: 20px; color: #ffffff; } .style_title{ font-size: 30px;font-weight: bold;color: #ffffff; } .navbar { position: fixed; top: 0; left: 0; right: 0; height: 60px; background: white; } </style>

你的代码看起来基本正确，但有一个小问题需要指出。在`activeMenu`中，你设置了`'./one'`作为默认选中的菜单项。然而，这里应该使用路由的路径`'/one'`而不是相对路径`'./one'`。请修改为以下代码：

data() {
  return {
    activeMenu: '/one' // 默认选中首页菜单项
  }
}

另外，你可以根据需要调整样式，确保菜单和路由的显示效果符合预期。如果还有其他问题，请随时提问！