vue-router 路由重定向与别名解析

重定向的意思就是，当你访问/a路由的时候，URL会替换成/b路由，具体可以看下面例子

1、创建test1.vue

<template>
  <div>
    test1页面
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {}
  },
  methods:{}
}
</script>

<style scoped></style>

2、创建test2.vue

<template>
  <div>
    test2页面
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {}
  },
  methods:{}
}
</script>

<style scoped></style>

3、对路由文件index.js进行配置

import Vue from 'vue';
import Router from 'vue-router';
import test1 from '@/components/test1';
import test2 from '@/components/test2';

Vue.use(Router);

export default new Router({
  routes: [
    //重定向和别名
    {
      path:'/test1',
      component:test1,
    },
    {
      path:'/test3',
      redirect:'/test1'//重定向到test1页面
    },
    {
      path:'/test2',
      component:test2,
      alias:'/a'    //别名为a,当URL为/a时，其实还是访问的是test2页面内容，就像访问/test2一样
    }    
  ]
})

4、效果如下：

当访问URL为 /test3，展示的其实是test1页面的内容

当访问/a时，显示的是test2的页面内容