Vue中路由的别名和重定向

import Vue from 'vue'
import VueRouter from 'vue-router'
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用页面
import About from './about.vue'
import Home from './home.vue'
import Info from './info.vue'

//定义routes路由的集合，数组类型
const routes = [
  //单个路由均为对象类型，path代表的是路径，component代表组件
  { path: '/about', component: About },

  //重定向，地址栏中输入地址/about-us，看到 /about 的页面，地址栏地址也被替换为 /about
  { path: '/about-us', redirect: { path: '/about' } },

  //redirect的值可以是对象，也可以直接传字符串
  //{ path: '/about-us', redirect: '/about' },

  //alias代表别名，地址栏输入别名 /about-me，看到的是 /about 的页面，但地址栏地址还是 /about-me
  { path: '/about', component: About, alias: 'about-me' },

  //嵌套路由，children是一个数组
  {
    path: '/home',
    component: Home,
    //访问 /home/info 地址时，看到是是Info页面
    //因为设置了别名，所以直接访问 /info-alias 也是代表访问Info页面
    children: [{ path: 'info', component: Info, alias: 'info-alias' }],
  },
]

//实例化VueRouter并将routes添加进去
const router = new VueRouter({
  //ES6简写，等于routes：routes
  routes,
})

//抛出这个这个实例对象方便外部读取以及访问
export default router