一次简单的Vue项目

3 路由实现

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

利用导航栏进行路由

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

看看整体路由布局（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的设置，直接上代码：

  
    
      
      
        选项1
        选项2
        选项3
        选项4
      
    
    
      
      导航二
    
    
      
      导航三
    
    
      
      导航四
    
  

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

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

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

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

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

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

image

image

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

动态面包屑及路由导航

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

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

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

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

看一下最后的效果：

image

image

面包屑的路由导航：

image

image

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