美文网首页
Vue,Element 爬过的坑

Vue,Element 爬过的坑

作者: 2f25a5d8710f | 来源:发表于2017-08-15 18:59 被阅读374次

1. 浏览器地址栏出现 #/

解决办法:http://www.cnblogs.com/zhuzhenwei918/p/6892066.html

export default new Router({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

2. 引用组件报错

Unknown custom element: <hello2> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

原因:
引用组件的时候

import { Hello2 } from './Hello2'

但在导出时,只导出一个对象,所以不能用{}

正确的引入方式

注意:大括号是重点!!!!

import Hello2 from './Hello2'

3. 路由的配置

先看默认的

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/Hello2',
      name: 'Hello2',
      component: Hello2
    }

如果这样配置的话,点击Hello2 ,会整页跳转到Hello2,
可以用children 配置, 如下:

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      children: [
        {
          path: '/hello2',
          name: 'Hello2',
          component: Hello2
        }
      ]
    }

4. 用element的NavMenu 配置导航菜单栏

在vue文档中,用路由入口要按照下面的格式

 <router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>

用了NavMenu 后,
可以不用router-link

<el-menu :router='true'>
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-menu-item index="3">订单管理</el-menu-item>
</el-menu>

特别注意这里的 :router="true",不写的话不会生效
如果不想用这个,需要在el-menu-item 中引router-link,这样会在li中插入一个a元素

<el-menu-item index="/hello2">
   <router-link to='/Hello2'>
      Hello2
   </router-link>
</el-menu-item>

相关文章

网友评论

      本文标题:Vue,Element 爬过的坑

      本文链接:https://www.haomeiwen.com/subject/pzemrxtx.html