vue2.0 导航栏跳转路由是怎么实现的？

- 日理万妓 2022-11-22 05:10 140阅读 0赞

对于一个新手来说，学习一个框架最重要的事情就是记录一下过程，下次再回顾的时候就很容易记住步骤了，不记得也可以直接翻出来自己之前写过的教程，几次之后也就顺手很多了，学习这个循序渐进的过程里面，笔记千万不可以少哦，下面就是我随手记录的一些笔记。

Element UI手册：https://cloud.tencent.com/developer/doc/1270  
github地址：https://github.com/ElemeFE/element

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

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

1：components  
新建页面

![图片.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>

![05c8267a63fc183b59ab72a422e4f65b.png][]

3:路由index.js

![aacc56e9da8d202dbd0487709da90baf.png][]

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：效果就可以看了

![3bfeb7af9265aab85fee96c23fee3435.gif][]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[.png]: /images/20221120/1569702b874d4bcb8b0cb596f887025f.png
[05c8267a63fc183b59ab72a422e4f65b.png]: /images/20221120/ccaeb1a71bf145cfa12777a75630a01a.png
[aacc56e9da8d202dbd0487709da90baf.png]: /images/20221120/c07d366906b343558db7ab8533eadb6c.png
[3bfeb7af9265aab85fee96c23fee3435.gif]: /images/20221120/6e6f3b7921d84e0d8efb55b45be917e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/2977cba827a543e4a0faee149096262d.png