VueJS项目报错解决:router.map is not a function - 方法大全
问题描述: vue报错 router.map is not a function原因和解决办法(2种以上):.在vue的高版本中已经弃用了低版本的.map()方法。可以通过设置向下兼容,或者新的方法,来实现路由页面的激活功能。.具体情况,我们通过下面的代码,对比一下不同版本的代码区别,如下:一、基于vue2.0,写对应的方法。Method 1 使用命令npm instal...
·
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,写对应的方法
- 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写法
- 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 - 方法大全 ” 的全部内容。
更多推荐
已为社区贡献51条内容
所有评论(0)