How to use Vue and Element-UI to implement route navigation function

How to use Vue and Element-UI to implement routing and navigation functions

Vue.js is an open source JavaScript framework used to build user interfaces. It is designed to be easy to use and flexible, enabling developers to build efficient single-page applications. Element-UI is a UI framework based on Vue.js, which provides a set of beautiful and easy-to-use components. In this article, we will introduce how to use Vue and Element-UI to implement route navigation functionality.

First, make sure you have installed and configured Vue and Element-UI. If you haven't installed it yet, you can find a detailed installation guide on the official website.

Next, we need to create a Vue instance and configure routing. In this example, we will use Vue Router to handle routing. Please make sure you have Vue Router installed.

// main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(VueRouter)
Vue.use(ElementUI)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // 更多路由...
  ]
})

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

In the above code, we imported Vue and Element-UI and configured Vue Router. We set up two routes, one is the home page (Home) and the other is the about page (About). You can add more routes according to your needs.

Next, we need to create the corresponding components in the project.

// Home.vue

<template>
  <div>
    <h1 id="欢迎来到首页">欢迎来到首页</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

// About.vue

<template>
  <div>
    <h1 id="关于我们">关于我们</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

Now, we have created two components. We need to register them in the route.

// main.js

import Home from './components/Home.vue'
import About from './components/About.vue'

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // 更多路由...
  ]
})

Now we can use route navigation functionality in our application. Element-UI provides a component called navigation bar (NavMenu), which we can use to display navigation links.

// App.vue

<template>
  <div id="app">
    <el-menu
      default-active="Home"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="Home">首页</el-menu-item>
      <el-menu-item index="About">关于</el-menu-item>
      <!-- 更多菜单项... -->
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleSelect(key) {
      this.$router.push({ name: key })
    }
  }
}
</script>

In the above code, we use Element-UI's navigation bar component (el-menu) to display navigation links and bind them to routing. When the user clicks on the navigation link, we jump to the page by calling the this.$router.push() method.

If you run this application, you will see a simple navigation bar and can switch between different pages.

The above is a simple example of using Vue and Element-UI to implement routing navigation function. You can extend and customize it to suit your needs. Hope this article is helpful to you!

The above is the detailed content of How to use Vue and Element-UI to implement route navigation function. For more information, please follow other related articles on the PHP Chinese website!