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>
网友评论