实例入手vue-router重定向

电玩女神 2023-10-18 11:48 45阅读 0赞

### 场景 ###

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

### 效果 ###

![Image 1][]![20181126205029685.gif][]

#### 前文 ####

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/84504573][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中

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

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
              }
          ]
        }
    
      ]
    })

[Image 1]: 
[20181126205029685.gif]: https://img-blog.csdnimg.cn/20181126205029685.gif
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_84504573]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84504573
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181126205102226.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70