实例入手vue-router重定向

场景

当一进来某一个APP，想让其显示某个页面，所以需要在index.vue使用重定向使其重定向到初始页面。

效果

前文

从实例入手学习Vue-router的使用-实现音乐导航菜单切换

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84504573

知识储备

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

实例

在router下的index.js中

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
import Home from "@/pages/home"
import Artists from "@/pages/artists"
import ListCate from "@/pages/listcate"
import Ucenter from "@/pages/ucenter"
import Search from "@/pages/search"
Vue.use(Router)

export default new Router({
  routes: [

      {
      path: '/',
      name: 'Index',
      redirect:"/home",
      component: Index,
      children:[
        {
          path: 'home',
          component: Home
        },
        {
            path:"artists",
            component:Artists
          },
          {
            path:"listcate",
            component:ListCate
          },
          {
            path:"ucenter",
            component:Ucenter
          },
          {
            path:"search",
            component:Search
          }
      ]
    }

  ]
})