在 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 提供的 “推荐工程”,一样存在这个问题。