VueJS项目报错解决：router.map is not a function - 方法大全

VueJS项目报错解决：router.map is not a function - 方法大全

---

问题描述： vue报错 router.map is not a function

---

原因和解决办法（2种以上）：

在vue的高版本中已经弃用了低版本的.map()方法。
可以通过设置向下兼容，或者新的方法，来实现路由页面的激活功能。
.
具体情况，我们通过下面的代码，对比一下不同版本的代码区别，如下：

---

---

一、兼容处理方法

Method 1 使用命令npm install vue-router@0.7.13兼容1.0版本vue。

---

---

二、基于vue2.0，写对应的方法

1. vue低版本 [ 旧版本代码 ]

// 部分代码如下：
let router = new VueRouter();

router.map({
	'/goods': {
		component: goodsVue
	},
	'/ratings': {
		component: ratingsVue
	},
	'/seller': {
		component: sellerVue
	}
});

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

router.go('/goodsVue');  // 定义首页

注意： 使用1.0和2.0在一些用法上有比较大的版本差别，所以不同用法！

Method 2 export default写法

2. vue高版本 [ 弃用了.map()方法 ]

// 部分代码如下：
Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history',
  routes: [
    { // 定义首页
      path: '',
      redirect: {name: 'goods'}
    },
    {
      path: '/',
      name: 'header',
      component: headerVue
    },
    {
      path: '/goods',
      name: 'goods',
      component: goodsVue
    },
    {
      path: '/ratings',
      name: 'ratings',
      component: ratingsVue
    },
    {
      path: '/seller',
      name: 'seller',
      component: sellerVue
    }
  ]
})；

---

Method 3 const 写法

---

以上就是关于“ VueJS项目报错解决：router.map is not a function - 方法大全 ” 的全部内容。