iView 最深的坑

在 iView 的官网《快速上手》部分，你会看到这样的代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';    // 路由挂载
import Routers from './router.js';       // 路由列表
import iView from 'iview';
import 'iview/dist/styles/iview.css';    // 使用 CSS

Vue.use(VueRouter);
Vue.use(iView);

// 路由配置
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

如果你照着它来敲，那你完蛋了！新版的 vue-cli 中，路由部分直接返回的是一个 Router 对象，所以，iView 官网的代码你永远无法得到正确的结果。方法很简单：

一、手动修改 vue-cli 生成的 router/index.js 里的 export default：

export default new Router({routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    })

为

export default {routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }

二、修改 iView 官网的示例代码 :

import Routers from './router.js';       // 路由列表

改为

import router from './router'

删除

const router = new VueRouter(RouterConfig);

其它保持不变。

建议采用第2种。Vue 才是关键，ui库要适应框架，而不是让框架适应ui库。

ps：你即使使用 iview 提供的 “推荐工程”，一样存在这个问题。

vue iView 2018-05-03 21:00 2172340