如何使用Vue和Element-UI实现路由导航功能-猿码集

Vue和Element-UI是目前流行的前端框架，它们可以帮助我们更快速更方便地创建我们所需的网页。其中路由导航就是前端开发中不可或缺的一部分，下面将详细介绍如何使用Vue和Element-UI实现路由导航功能。

1. Vue Router

Vue Router是Vue.js官方的路由管理器，它和Vue.js深度集成，借助Vue.js强大的组件化开发能力，可以轻松实现前端的路由功能。

安装Vue Router

为了使用Vue Router，我们需要先安装它。可以通过npm安装它，命令如下：

npm install vue-router --save

配置Vue Router

在使用Vue Router之前，我们需要对它进行配置。在src目录下创建router文件夹，并在该文件夹下创建index.js文件。

引入Vue Router和Vue

首先，我们需要在index.js文件中引入Vue Router和Vue，代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.use(VueRouter)是将Vue Router插件安装到Vue中的方法。

配置路由规则

接下来，我们需要配置路由规则，即定义哪些路径对应哪些组件。在index.js文件中添加如下代码：

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

上面代码中，我们引入了两个组件Home和About，并定义了路由规则。{ path: '/', name: 'Home', component: Home }表示路径为'/'对应着Home组件。

将路由挂载到Vue实例中

最后，我们需要将路由挂载到Vue实例中。在main.js中修改代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

我们通过import引入了router，然后在Vue实例中挂载了router。

2. Element-UI的导航菜单

Element-UI提供了方便易用的导航菜单组件，可以让我们快速创建菜单。下面将演示如何使用Element-UI的导航菜单组件创建一个简单的菜单。

安装和引入Element-UI

首先，我们需要安装并引入Element-UI。可以通过npm安装Element-UI，命令如下：

npm install element-ui --save

然后，在main.js中引入Element-UI和其样式文件，代码如下：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

创建导航菜单

接着，在App.vue中添加导航菜单组件el-menu，代码如下：

<template>
  <div id="app">
    <el-menu :default-active="$route.path" mode="horizontal">
      <el-menu-item index="/">Home</el-menu-item>
      <el-menu-item index="/about">About</el-menu-item>
    </el-menu>
    <router-view/>
  </div>
</template>

在el-menu中使用default-active="$route.path"，可以自动根据当前路由高亮对应的菜单项。

3. 跳转路由

最后，我们需要实现点击菜单项时可以跳转到对应的路由。在el-menu-item中使用router-link标签，并设定to属性为对应路径，代码如下：

<template>
  <div id="app">
    <el-menu :default-active="$route.path" mode="horizontal">
      <el-menu-item index="/">
        <router-link to="/">Home</router-link>
      </el-menu-item>
      <el-menu-item index="/about">
        <router-link to="/about">About</router-link>
      </el-menu-item>
    </el-menu>
    <router-view/>
  </div>
</template>

现在，我们点击菜单项就可以跳转到对应的路由了。

以上就是如何使用Vue和Element-UI实现路由导航功能的详细介绍。Vue Router提供了强大的路由管理能力，而Element-UI的导航菜单组件可以方便地创建菜单。只需按照上述步骤配置即可轻松实现路由导航功能。

如何使用Vue和Element-UI实现路由导航功能