导航栏跳转 可以用router-link吗

是的，你已经在代码中正确地使用了`router-link`组件来创建导航栏的跳转链接。在Vue Router中，`router-link`是一个用于生成带有正确路径的链接的Vue组件。

通过使用`router-link`，你可以将导航栏中的每个菜单项包装在`<router-link>`标签中，并设置`to`属性为对应的路径。当用户点击菜单项时，Vue Router会自动处理路由跳转，加载对应路径下的组件。

例如，在你提供的代码中，你使用了以下代码片段来创建导航栏的菜单项：

<el-menu-item index="/one" class="navs_right">
  <router-link to="./one">原材料</router-link>
</el-menu-item>

这样，当用户点击"原材料"菜单项时，Vue Router会加载与`/one`路径匹配的组件。

因此，你已经正确地使用了`router-link`组件来实现导航栏的跳转功能。如果有其他问题，请随时提问！

相关问题

vue3导航栏router-link

在Vue3中，你可以使用`<router-link>`组件来实现导航栏的跳转。

具体使用方法如下：

1. 首先，你需要在你的Vue项目中安装`vue-router`依赖：

npm install vue-router

2. 在`main.js`中引入`vue-router`并使用它：

import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp(App).use(router).mount('#app')

3. 在你的导航栏中使用`<router-link>`组件：

<template>
  <nav>
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
      <li>
        <router-link to="/about">About</router-link>
      </li>
    </ul>
  </nav>
</template>

这样，当你点击导航栏中的链接时，Vue会自动地帮你跳转到指定的页面。

router-link实现导航栏

要使用 router-link 实现导航栏，你需要先在 Vue 项目中安装并配置好 Vue Router。

1. 首先，在你的 Vue 项目中安装 Vue Router：

npm install vue-router

2. 在你的 main.js 文件（或者是你的入口文件）中引入 Vue Router 并配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home }, // 定义首页的路由
  { path: '/about', component: About }, // 定义关于页面的路由
 // 其他页面的路由...
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

3. 在你的导航栏组件中使用 router-link：

<template>
  <div>
    <router-link to="/">首页</router-link> <!-- 点击跳转到首页 -->
    <router-link to="/about">关于</router-link> <!-- 点击跳转到关于页面 -->
    <!-- 其他导航链接... -->
  </div>
</template>

在上面的代码中，使用 `<router-link>` 组件来创建导航链接。`to` 属性指定导航链接的目标路径，即路由的 `path`。

这样就可以通过点击导航链接来实现页面之间的跳转了。记得在 App.vue 中使用 `<router-view>` 组件来渲染当前路由所匹配的组件内容。

希望能帮到你！如有更多问题，请继续提问。