Question

vue-router.js 路由刷新后不能点击

HTML代码
<div id="app">
<h1>Hello App!</h1>
<p>
<a v-link="{ path: '/home' }">Go to Home</a>
<a v-link="{ path: '/list' }">Go to list</a>
<a v-link="{ path: '/aboutus' }">Go to aboutus</a>
</p>
<router-view></router-view>
</div>

js代码
var Home = {
template: '<p>This is Home!</p>'
}
var List = {
template: '<p>This is List!</p>'
}
var Aboutus = {
template: '<p>This is Aboutus!</p>'
}
var App = {}
var router = new VueRouter()
router.map({
'/home': {
component: Home
},
'/list': {
component: List
},
'/aboutus': {
component: Aboutus
}
})
router.redirect({App:'/home'});
router.start(App,'#app')

页面第一次进去没问题,但是F5刷新之后不能点击切换组件了?是什么原因?

Answer 1

在用vue-cli脚手架生成项目之后，在app.vue和main.js里面简单修改一下，用来测试路由的连通性，具体代码把官网上的抄下来就可以
按照官网上的代码启动不成功的原因就是，在项目挂载的时候少了一个render，我也只是菜鸟，目前只知道这样子，具体的原因俺也不懂。