一次简单的Vue项目

3 路由实现

在摸爬滚打一段时间后,决定进行路由相关的处理。

利用导航栏进行路由

本文采用的是element ui提供的组件el-menu中利用自带的index进行路由,当然也可以使用<router-link>标签来实现,不过可能会稍微麻烦一些。由于本文的例子中是不带参数的简单路由,所以直接指定路径。

看看整体路由布局(router.ts):

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/components/Test.vue'),
      meta: { title: '首页' },
      children: [
        {
          path: '1',
          name: '1',
          // 懒加载
          meta: { title: '1' },
          component:()=> import('@/components/1.vue'),
          children: [
            {
              path: '1-1',
              name: '1-1',
              component: () => import('@/components/1-.vue'),
              meta: { title: '1-1' }
            }, {
              path: '1-2',
              name: '1-2',
              component: () => import('@/components/1-.vue'),
              meta: { title: '1-2' }
            }, {
              path: '1-3',
              name: '1-3',
              component: () => import('@/components/1-.vue'),
              meta: { title: '1-3' }
            }, {
              path: '1-4',
              name: '1-4',
              component: () => import('@/components/1-.vue'),
              meta: { title: '1-4' }
            },
          ]
        },
        {
          path: '2',
          name: '2',
          // 懒加载
          component: () => import('@/components/Content.vue'),
          meta: { title: '2' }
        }, {
          path: '3',
          name: '3',
          // 懒加载
          component: () => import('@/components/Content.vue'),
          meta: { title: '3' }
        }, {
          path: '4',
          name: '4',
          // 懒加载
          component: () => import('@/components/Content.vue'),
          meta: { title: '4' }
        },
      ]
    }
  ]
})

可以看到是一个比较简单的嵌套路由,但是在实际应用过程中还是有些问题,等系统地学习了vue-router后在尝试比较复杂的带参数的路由。

然后精简了一下侧边导航栏,让它和路由相对应。在调整侧边栏时不知道是自己的原因还是组件的原因,又出现了样式问题,然后自己摸索了一下,修改了相应的样式,最后正常显示。

.el-submenu__title,
.el-menu-item {
  /* 调整子菜单的位置和文字对齐方式 */
  height: 60px;
  padding-right: 70px;
  text-align: initial;
}
image

接下来进行el-menu的设置,直接上代码:

  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="true"
  >
    <el-submenu index="/1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/1/1-1">选项1</el-menu-item>
        <el-menu-item index="/1/1-2">选项2</el-menu-item>
        <el-menu-item index="/1/1-3">选项3</el-menu-item>
        <el-menu-item index="/1/1-4">选项4</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="/2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-menu-item index="/3">
      <i class="el-icon-document"></i>
      <span slot="title">导航三</span>
    </el-menu-item>
    <el-menu-item index="/4">
      <i class="el-icon-setting"></i>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>

将el-menu的router属性设置为true,这样就表示使用了vue-router模式,即在激活导航时以index作为path进行路由跳转。在本例中直接向index写入了绝对路径,如果不写绝对路径的话,会出现一些问题,后面会进行详细探讨。

我们分别来看下在路由中用到的相应组件的内容。

1-.vue,主要是打印当前匹配到的路由路径。

<template>
  <div>
    <h1>{{ $route.path }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

1.vue,很简单,作为后边多级路由展示的一个组件。

<template>
    <div>
        根路由
        <router-view></router-view>
    </div>
</template>

content.vue,实际上也是匹配当前路由名称的组件,为了和1-.vue区分开来所以起了不一样的名字。

<template>
  <h1>{{ $route.name }}</h1>
</template>

看一下实现的路由的效果:

image
image

这下简单的路由功能实现了。

动态面包屑及路由导航

面包屑是一个很有趣的组件,通常情况下起到了一个指示当前路径的作用,同样也可以用作导航。本节就专门介绍一下动态面包屑的实现。

本例中实现动态面包屑的原理就是监听路由的变化,使用vue-router中的watch方法,关于vue-router的学习,后边应该会专门学习。

首先新建一个面包屑组件Breadcrumb.vue,在官方给出的样例组件中稍作修改,这里面其实有很多路由方面的坑,后续再填吧,也是借鉴了有些网友的:

<template>
  <div class="example-container">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item
        v-for="(item,index) in breadList"
        :key="index"
        :to="{ path: item.path }"
      >{{item.name}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadList: [] // 路由集合
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
      console.log(this.$route.path);
      // console.log(this.breadList)
    }
  },
  methods: {
    isHome(route) {
      return route.name === "home";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      //如果不是首页
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/", name: "首页", meta: { title: "首页" } }].concat(
          matched
        );
      }
      //如果不进行赋值,根路由会为空,最底层的导航就会失效
      matched[0].path = "/";
      this.breadList = matched;
    }
  },
  created() {
    this.getBreadcrumb();
  }
};
</script>

在需要的组件中进行注册,本文是Test.vue:

<template>
  <el-container>
    <el-aside width="200px">
      <navmenu></navmenu>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <bread></bread>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import Main from "@/components/Main";
export default {
  name: "app",
  components: {
    navmenu: Main,
    bread: Breadcrumb
  }
};
</script>

看一下最后的效果:

image
image

面包屑的路由导航:

image
image

至此简单的路由就实现啦,后续会继续探索相应组件的使用。

推荐阅读更多精彩内容

  • 2 搭建一个简单的后台管理布局 文件创建 在准备好相关环境后,我们开始创建自己的项目。整个项目的目录结构如下图所示...
    Prejudice_ccca阅读 455评论 0 0
  • 5 登录验证及权限设置 既然要做一个系统,肯定就少不了登录验证,我们先实现一个简单的登录页面。首先在compone...
    Prejudice_ccca阅读 2,667评论 2 1
  • 4 表格使用 表格是前端经常使用到的一个工具,尤其是在管理系统中,因为存在着数据的展示和操作(增删改查)。 我们将...
    Prejudice_ccca阅读 203评论 0 0
  • 1 环境准备 最近由于项目需要且人员不足(其实是不想求别人。。。),又希望多学点知识,于是动手自己搭建一个后台管理...
    Prejudice_ccca阅读 374评论 0 1
  • 本文首发于TalkingCoder,一个有逼格的程序员社区。转载请注明出处和作者。 写在前面 本文为系列文章,总共...
    Aresn阅读 8,949评论 0 42