vue-router中router.go升级问题

问题描述

问 题

升级前，正常

this.$route.router.go({
                    name: 'detail',
                    params: {
                        id: index
                    }
                })

http://router.vuejs.org/en/es...

// literal string
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: 123 }})

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

现在理解上有点问题，升级不成功

this.$route.push({ path: 'menu2' })

结果
Uncaught TypeError: this.$route.push is not a function

$route如下图
$route.router为undefined

路由版本升级是不是也有问题

                    '/menu1': {
                    component: Menu1,
                    subRoutes: {
                        'detail/:id': {
                            name: 'detail',
                            component: Person
                        }
                    }
                },

                    path: 'menu1',
                    component: menu1,
                    children: [{
                        path: 'detail/:id',
                        component: Person
                    }]

解决方案

vue-router 會自動在組件內注入兩個對象：$route, $router

$route => 當前路由對象，例如 this.$route.path // => /post/12
$router => 就是 Router 對象，例如 this.$router.push('/home')

所以你那應該是 this.$router.push({ path: 'menu2' }) 才對。

至於路由的配置，現在統一用數組，例如：

  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]

这篇关于vue-router中router.go升级问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！