vue2从零开始记录----vue-router安装并配置使用

上文记录了vue项目的搭建，现在又用到页面跳转，就需要使用vue-router，接下来记录下vue-router的使用情况

一、安装vue-router

页面跳转需要配置路由，首先需要安装vue-router,注意使用的vue的版本，我的vue版本是2.6.14，直接使用 npm install vue-router 会报版本不兼容，因此我安装了3.5.2。

npm install --save vue-router@3.5.2

二、项目引入路由并配置

1.新建router.js,主要要加载的页面的路径要配置正确。

import Vue from 'vue'
import VueRouter from 'vue-router'
//你自己需要加载的页面
import home from "./components/pages/Home.vue";
import one from "./components/pages/oneAbout.vue";
import two from "./components/pages/twoDetail.vue";
import three from "./components/pages/threeNote.vue";
Vue.use(VueRouter)

export default new VueRouter(
    {
         routes : [
            {
                path: '/home',
                name: 'home',
                component: home
              },
              {
                path: '/one',
                name: 'one',
                component: one
              },
              {
                path: '/two',
                name: 'two',
                component: two
              },
              {
                path: '/three',
                name: 'three',
                component: three
              }
        ]
    }
)

2.修改 main.js，新增两行代码

3.修改菜单代码，el-menu标签中加入 :router="true"

<el-menu ref="menu" default-active="1" :unique-opened="true" mode="vertical" :router="true" background-color="#093263"

4.在子菜单增加click事件

<el-menu-item  index="one" @click="handleMenuClick('one')">变压器监测1</el-menu-item>

5.在methods中添加click事件方法

handleMenuClick(itemIndex) {
      this.selectedMenuItem = itemIndex; // 更新选中项索引
    },

*******************************完整页面代码

<template>
  <el-container class="leftMain">
    <el-header class="leftheader">
      <p class="p3">可视化大数据展示中心</p>
    </el-header>
    <el-main>
      <el-row class="tac">
        <el-menu ref="menu" default-active="1" :unique-opened="true" mode="vertical" :router="true" background-color="#093263"
          text-color="#bddde6">
          <el-menu-item index="home">
            <i class="el-icon-menu"></i>
            <span>首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <span slot="title"><i class="el-icon-location"></i>一级菜单</span>
            <el-menu-item  index="one" @click="handleMenuClick('one')">变压器监测1</el-menu-item>
            <el-menu-item  index="two" @click="handleMenuClick('two')">变压器监测2</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <span slot="title"><i class="el-icon-setting"></i>二级菜单</span>
            <el-menu-item index="three" @click="handleMenuClick('three')">变压器监测3</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      selectedMenuItem: null, // 初始值为空，表示无选中项
    };
  },
  methods: {
    handleMenuClick(itemIndex) {
      this.selectedMenuItem = itemIndex; // 更新选中项索引
    },
  }
}
</script>

6.修改要展示页面的容器，router会将页面显示到标签中

<div>
               <router-view></router-view>
          </div>