vue 入口文件main.js版本升级后的写法

首先让我们先看一下之前的版本是怎么写的

Vue.use(VueRouter)
let app = Vue.extend(App)
let router = new VueRouter()
router.map({
    '/goods': {
        component: goods
    },
    '/ratings': {
        component: ratings
    },
    '/seller': {
        component: seller
    }
})

router.start(app, '#app')//挂载点
router.go('/goods')//默认进入goods

从vue Router0.7.×的迁移

1. router.map({})

let routes=['/goods': {
        component: goods
    },
    '/ratings': {
        component: ratings
    },
    '/seller': {
        component: seller
    }
];
let router = new VueRouter({
routes
});
或者
var router = new VueRouter({
  routes: [{
    path: '/goods', component: goods
  },
  {
    path: '/ratings', component: ratings
  },
  {
    path: '/seller', component: seller
  }];
});

2. router.start(app,'#app');

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});

所以新的版本写法为

let router = new VueRouter({
  routes: [{
    path: '/goods', component: goods
  },
  {
    path: '/ratings', component: ratings
  },
  {
    path: '/seller', component: seller
  }
  ]
});
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

在这个过程中遇到了一个问题routes定义在router外部和内部有啥区别的？routes定义在外部，然后在router内引入routes会出现路由请求错误

let routes = [
  {path: '/goods', components: goods},
  {path: '/ratings', components: ratings},
  {path: '/seller', components: seller}
];
let router = new VueRouter({
  routes
});
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

image.png

error:[vue-router] Failed to resolve async component render: TypeError: _vm is undefined
大概意思是不能渲染异步的组件

如果您有更好的理解或者想法请评论