vue.js - Vue2.0+Vue-router2.0配置报错
本文介绍了vue.js - Vue2.0+Vue-router2.0配置报错的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
先上代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</body>
</html>main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(VueRouter)
Vue.use(Element)
const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>bar</div>'}
const router = new VueRouter({
routes: [
{path: '/', component: App},
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
]
})
/* eslint-disable no-new */
const app = new Vue({mode: 'history', router}).$mount('#app')用的是官方提供的vue-cli2.0脚手架，启动报错截图如下
明明配置的是mode: 'history'，可为什么还是会自动跳转到/#/呢
解决方案
mode属性应该放在router里面
const router = new VueRouter({
mode: 'history',
routes: [
{path: '/', component: App},
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
]
})
new Vue({
el: '#app',
router,
render: h => h(App)
})这篇关于vue.js - Vue2.0+Vue-router2.0配置报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
