vue2.0 + element-ui 实战项目-导航栏跳转路由(二）

向右看齐 2022-11-21 01:09 153阅读 0赞

Element UI手册：[https://cloud.tencent.com/developer/doc/1270][https_cloud.tencent.com_developer_doc_1270]  
github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

vue2.0官方网站：[http://caibaojian.com/vue/guide/installation.html][http_caibaojian.com_vue_guide_installation.html]  
element-ui官方网站：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

--------------------

1：components  
新建页面

![format_png][]

图片.png

2：打开app.vue  
写代码

<template>
      <div>
        <el-col :span="2">
          <el-menu
            :default-active="this.$route.path"
            router
            mode="horizontal"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
              <template slot="title">
                <i class="el-icon-s-platform"></i>
                <span> {
        { item.navItem }}</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-col>
    
        <router-view class="menu-right" />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          navList: [
            { name: "/views/chip", navItem: "地图碎片" },
            { name: "/views/device", navItem: "地图设备" },
            { name: "/views/params", navItem: "地图参数" },
            { name: "/views/picture", navItem: "地图图片" },
          ],
        };
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
      },
    };
    </script>
    
    <style>
    .menu-right {
      margin-left: 200px;
    }
    </style>

![format_png 1][]

3:路由index.js

![format_png 2][]

import Vue from 'vue'
    import Router from 'vue-router'
    import Chip from '@/views/chip'
    import HelloWorld from '@/components/HelloWorld'
    import Device from '@/views/device'
    import Params from '@/views/params'
    import Picture from '@/views/picture'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
         {
          path: '/views/chip',
          name: 'chip',
          component: Chip
        }, {
          path: '/views/device',
          name: 'device',
          component: Device
        },
         {
          path: '/views/params',
          name: 'params',
          component: Params
        },{
          path: '/views/picture',
          name: 'picture',
          component: Picture
        }
      ]
    })

4：新页面的内容,我写的比较简单，需要自己写下功能需求所在的代码  
picture.vue

<template>  
        <div>
        我是picture页面
        </div>  
    </template>
    <script>
    </script>
    <style>
    </style>

5：效果就可以看了

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTM1OTA0OGZkZmRmZjMzNmYuZ2lm][]

--------------------

[https_cloud.tencent.com_developer_doc_1270]: https://links.jianshu.com/go?to=https%3A%2F%2Fcloud.tencent.com%2Fdeveloper%2Fdoc%2F1270
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[http_caibaojian.com_vue_guide_installation.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fcaibaojian.com%2Fvue%2Fguide%2Finstallation.html
[https_element.eleme.cn_zh-CN]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN
[format_png]: /images/20221120/dae0aefdffd345edbbb257d5bf0b8fa3.png
[format_png 1]: /images/20221120/ccbe29f3fd724d4a89aed58814e60984.png
[format_png 2]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTlhMmM4NjE1OTQ5ZjhhMmQucG5n?x-oss-process=image/format,png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTM1OTA0OGZkZmRmZjMzNmYuZ2lm]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTM1OTA0OGZkZmRmZjMzNmYuZ2lm