设置导航路由

业务：实现导航路由的切换（采用路由跳转，不采用a链接跳转）。用户在点击”农业资讯“导航时，地址栏会有相应的url地址，若将该地址复制发送给别人，别人通过该地址访问能够显示对应的导航页

 

如：Url地址为实时气象与农情 http://localhost:8082/AgrometeorologyPage/RealMeteorologyAndAgricultural

复制发送，新页签打开：

效果如下 ：

具体实现： 

1.使用ant design vue中的menu导航组件渲染页面

    <div class="nav">
      <a-menu
        v-model="current"
        mode="horizontal"
        selectable
        @select="selectedNav"
      >
        <a-menu-item key="农业资讯">
          <router-link to="/AgrometeorologyPage/AgriculturalConsulting"
            >农业资讯</router-link
          >
        </a-menu-item>
        <a-menu-item key="气象环境监测"
          ><router-link to="/AgrometeorologyPage/EnvironmentDetection"
            >气象环境监测</router-link
          >
        </a-menu-item>
        <a-menu-item key="农用天气预报"
          ><router-link to="/AgrometeorologyPage">农用天气预报</router-link>
        </a-menu-item>
        <a-menu-item key="气象灾害"
          ><router-link to="/AgrometeorologyPage">气象灾害</router-link>
        </a-menu-item>
        <a-menu-item key="实时气象与农情"
          ><router-link to="/AgrometeorologyPage/RealMeteorologyAndAgricultural"
            >实时气象与农情</router-link
          >
        </a-menu-item>
        <a-menu-item key="农业气象科普"
          ><router-link to="/AgrometeorologyPage">农业气象科普</router-link>
        </a-menu-item>
        <a-menu-item key="更多">更多<a-icon type="caret-down" /> </a-menu-item>
      </a-menu>
    </div>

2.用router-link进行导航路由的切换，以下举一个栗：

        <a-menu-item key="农业资讯">
          <router-link to="/AgrometeorologyPage/AgriculturalConsulting"
            >农业资讯</router-link
          >
        </a-menu-item>

3.添加meta属性，携带路由信息

4.给a-menu添加v-model属性，绑定current。用户在加载mounted和点击selectedNav时改变current的值。mounted加载时从route里取出title的值，又因为current是一个数组，数据取路由元信息时也要是个数据形式 [this.$route.meta.title]

selectedKeys(v-model) 表示当前选中的菜单项 key 数组，而该组件的select事件的回调函数有selectedKeys这一项，所以v-model="current"的值与key 值有关

完成代码如下：

<!-- 头部导航 HeaderNavigation.vue-->
<template> 
  <div class="HeaderNavigation">
    <div class="logo">
      <img src="/images/nongyeqixiang/logo.png" alt="" />
    </div>
    <div class="nav">
      <a-menu
        v-model="current"
        mode="horizontal"
        selectable
        @select="selectedNav"
      >
        <a-menu-item key="农业资讯">
          <router-link to="/AgrometeorologyPage/AgriculturalConsulting"
            >农业资讯</router-link
          >
        </a-menu-item>
        <a-menu-item key="气象环境监测"
          ><router-link to="/AgrometeorologyPage/EnvironmentDetection"
            >气象环境监测</router-link
          >
        </a-menu-item>
        <a-menu-item key="农用天气预报"
          ><router-link to="/AgrometeorologyPage">农用天气预报</router-link>
        </a-menu-item>
        <a-menu-item key="气象灾害"
          ><router-link to="/AgrometeorologyPage">气象灾害</router-link>
        </a-menu-item>
        <a-menu-item key="实时气象与农情"
          ><router-link to="/AgrometeorologyPage/RealMeteorologyAndAgricultural"
            >实时气象与农情</router-link
          >
        </a-menu-item>
        <a-menu-item key="农业气象科普"
          ><router-link to="/AgrometeorologyPage">农业气象科普</router-link>
        </a-menu-item>
        <a-menu-item key="更多">更多<a-icon type="caret-down" /> </a-menu-item>
      </a-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderNavigation",
  data() {
    return {
      current: ["气象环境监测"],
    };
  },
  mounted() {
    this.current = [this.$route.meta.title];
  },
  methods: {
    selectedNav(item) {
      console.log(item.keyPath);
      this.current = item.keyPath;
    },
  },
};
</script>

<style scoped lang="less">
.HeaderNavigation {
  width: 192rem;
  height: 16rem;
  background-color: #f2f2f2;
  /* border: 1px solid red; */
  .logo {
    width: 192rem;
    height: 12rem;
    /* border: 1px solid green; */
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nav {
    width: 100%;
    height: 4rem;
    background: #008080;
    overflow: hidden;
    .ant-menu-horizontal {
      float: right;
      background: #008080;
      height: 2.5rem;
      font-size: 1.8rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 4rem;
      letter-spacing: 0.2rem;
      border: none;
      /* // 选中 */
      .ant-menu-item {
        border-bottom: none;
        color: #ffffff;
      }
      /* // 选中 */
      .ant-menu-item-selected {
        color: #ffffff;
        height: 4rem;
        background: url("/images/nongyeqixiang/selected.png") no-repeat;
        /* background-size: 20.7rem 4rem; */
        background-size: 100% 4rem;
      }
    }
    .ant-menu-horizontal > .ant-menu-item > a {
      color: white;
    }
  }
}
</style>

// router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home/index";
import RadarPage from "@/views/FileInfoPage/RadarPage";
import CloudPage from "@/views/FileInfoPage/CloudPage";
import FileInfoPage from "../views/FileInfoPage/index"
import WeatherWarnInfo from "../views/FileInfoPage/WeatherWarnInfo"

Vue.use(VueRouter);

const routes = [
  // {
  //   path:'',
  //   redirect:'/' //重定向
  // },
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/RadarPage",
    name: "RadarPage",
    component: RadarPage,
  },
  {
    path: "/CloudPage",
    name: "CloudPage",
    component: CloudPage,
  },
  {
    path: "/FileInfoPage",
    name: "FileInfoPage",
    component: FileInfoPage,
  },
  {
    path: "/WeatherWarnInfo",
    name: "WeatherWarnInfo",
    component: WeatherWarnInfo,
  },
  {
    redirect:'/AgrometeorologyPage/EnvironmentDetection', //重定向
    path: "/AgrometeorologyPage",
    name: "AgrometeorologyPage",
    component: () => import('@/views/AgrometeorologyPage'),
    children: [
      {
        path: 'EnvironmentDetection',
        name: "EnvironmentDetection",
        component: () => import('@/views/AgrometeorologyPage/EnvironmentDetection'),
        meta: { title: '气象环境监测' }
      },
      // 农业资讯
      {
        path: 'AgriculturalConsulting',
        name: "AgriculturalConsulting",
        component: () => import('@/views/AgrometeorologyPage/AgriculturalConsulting'),
        meta: { title: '农业资讯' }
      },
      // 农业资讯浏览
      {
        path: 'AgriculturalAdviceBrowse',
        name: "AgriculturalAdviceBrowse",
        component: () => import('@/views/AgrometeorologyPage/AgriculturalAdviceBrowse'),
        meta: { title: '农业资讯' }
      },
      // 实时气象与农情
      // {
      //   path: 'RealtimeMeteorological',
      //   name: "RealtimeMeteorological",
      //   component: () => import('@/views/AgrometeorologyPage/RealtimeMeteorological'),
      //   meta: { title: '农业资讯' }
      // },
      // 农业资讯发布
      {
        path: 'AgriculturaInformationRelease',
        name: "AgriculturaInformationRelease",
        component: () => import('@/views/AgrometeorologyPage/AgriculturaInformationRelease'),
        meta: { title: '农业资讯' }
      },
      // 富文本编辑器
      {
        path: 'TextEditor',
        name: "TextEditor",
        component: () => import('@/views/AgrometeorologyPage/TextEditor'),
        meta: { title: '农业资讯' }
      },
      //预报页面
      {
        path: 'AgriculturalWeatherForecast',
        name: "AgriculturalWeatherForecast",
        component: () => import('@/views/AgrometeorologyPage/AgriculturalWeatherForecast'),
        meta: { title: '农用天气预报' }
      },
      //气象灾害
      {
        path: 'MeteorologicalDisaster',
        name: "MeteorologicalDisaster",
        component: () => import('@/views/AgrometeorologyPage/MeteorologicalDisaster'),
        meta: { title: '气象灾害' }
      },
      //实时气象与农情
      {
        path: 'RealMeteorologyAndAgricultural',
        name: "RealMeteorologyAndAgricultural",
        component: () => import('@/views/AgrometeorologyPage/RealMeteorologyAndAgricultural'),
        meta: { title: '实时气象与农情' }
      },
    ]
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;