【VUE】element-ui+vue-router:实现导航栏跳转路由

kiraraLou

已于 2024-05-27 13:29:22 修改

阅读量2k

点赞数 8

分类专栏：前端文章标签： vue.js ui javascript

于 2024-01-16 17:23:30 首次发布

本文链接：https://blog.csdn.net/mrerlou/article/details/135630075

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中使用VueRouter实现页面间的路由跳转，通过导航菜单控制组件显示，包括安装、配置路由实例和在Vue文件中应用<router-view>组件。

摘要由CSDN通过智能技术生成

实现目的

页面中点击导航栏菜单中的某一选项卡，使用导航栏进行路由跳转。如下图所示。

在这里插入图片描述

我们设计三个页面，首页是App.vue, 两个导航页面分别为 About.vue, Home.vue。在App.vue 页面中有导航菜单，点击菜单分别跳转。

1. 安装

npm install vue-router

2. 创建 Vue Router 实例

创建一个新文件 router.js 并定义你的路由：

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/about', component: () => import('./views/About.vue') },
];

const router = new VueRouter({
  routes,
});

export default router;

3. VUE 文件如下：

App.VUE

<template>
  <div>
    <el-container>

      <el-header>
        <el-menu :default-active="activeIndex"
                 :router='true'
                 class="el-menu-demo"
                 mode="horizontal">
          <el-menu-item index="0">
          </el-menu-item>
          <el-menu-item index="Home">首页</el-menu-item>
          <el-menu-item index="About">心得</el-menu-item>
          <el-menu-item index="3"><a href="https://www.ele.me"
               target="_blank">测试</a></el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <!-- 在模板中使用 <router-view> 来显示组件 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '/Home',
    };
  },
  watch: {
    $route () {
      this.setCurrentRoute()
    }
  },
  mounted () {
  },
  created () {
    this.setCurrentRoute()
  },
  methods: {
    handleSelect (key, keyPath) {
      this.activeIndex = key
    },
    setCurrentRoute () {
      this.activeIndex = this.$route.name;//关键   通过他就可以监听到当前路由状态并激活当前菜单
    }

  }
}

About.vue

<template>
  <div>
    <h2>About</h2>
    <p>Welcome to the About page!</p>
  </div>
</template>

Home.vue

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page!</p>
  </div>
</template>

4. 在 App 中使用 Vue Router：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 导入 Vue Router 实例

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router, // 将路由添加到 Vue 实例中
}).$mount('#app');