element ui框架（重定向、404和路由模式）

        前面我们陆续讨论了关于网页路由、子路由、路由传参等问题，事实上路由还有一些需要注意的地方，这里也一并讨论下。

1、重定向

        重定向是web后端开发经常遇到的问题，只不过现在从后端转到了前端而已。我们可以举例说明那个，如何试下重定向功能。首先，在router/index.js添加选项，

{
      path: '/Main/:name',
      name: 'Main',
      component: Main,
      children :[
          {
              path: '/Member/Level/:id', //id为需要传递的参数
              name:'MemberLevel',
              component: MemberLevel,
              props:true   // 添加props属性
          },
          {
              path: '/Member/List',
              name:'MemberList',
              component: MemberList,
          },
          {
              path: '/Redirect',
              redirect: '/Member/List'
          }
      ]
    }

        阅读代码发现，/Redirect和/Member/List指向了同一个链接。这样就可以通过在Main.vue里面添加一个超链接来验证了，

<el-menu-item index="1-3">
              <router-link to="/Redirect">重定向</router-link>
            </el-menu-item>

2、404

        404是经常遇到的另外一个问题。当然，要实现这个目标，第一步要做的就是先创建一个vue文件，也就是目标网页访问失败后看到的那个网页。比如，这个文件可以命名为NotFound.vue，内容如下所示，

<template>
  <div>404</div>
</template>

<script>
export default {
  name:"NotFound"
}

</script>

<style>
</style>

        第二步，就是将这个vue文件和相关的url实现匹配关联即可。要做到这个，只需要添加一条路由就可实现这个目标，

{
    path:'*',
    component:NotFound
  }

3、路由模式

        所谓的开启路由模式，就是在输入网页的时候，去除url中的#符号。比如我们想查看MemberList的时候，vue就会自动生成​​http://127.0.0.1:8082/#/Member/List​​。如果我们想去除#这个符号，只需要在路由表里面添加一个mode属性即可，

export default new Router({
  mode: 'history', //添加的模式
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
  {
      path: '/Login',
      name: 'Login',
      component: Login
    },
  {
      path: '/Main/:name',
      name: 'Main',
      component: Main,
    children :[
      {
        path: '/Member/Level/:id', //id为需要传递的参数
        name:'MemberLevel',
        component: MemberLevel,
        props:true   // 添加props属性
      },
      {
        path: '/Member/List',
        name:'MemberList',
        component: MemberList,
      },
      {
        path: '/Redirect',
        redirect: '/Member/List'
      }
    ]
    },
  {
    path:'*',
    component:NotFound
  }
  ]
})

        这样，相关网页就可以直接用ip打开，不再需要#号，