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 7345825