javascript - Vue-cli3 演示使用 vue-router 路由到页面不起作用
问题描述
我正在尝试学习 vue-router,但我遇到了 vue-cli3 + vue-router demo 的问题。
此演示使用vue create
默认创建。我试图最小化演示,但它仍然不起作用。
这是main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
const Foo = { template: '<div>foo</div>' }
const routes = [
{ path: '/foo', component: Foo }
]
new Vue({
router: new VueRouter({
mode: 'history',
routes: routes
}),
render: h => h(App),
}).$mount('#app')
这是App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!--HelloWorld msg="Welcome to Your Vue.js App"/-->
<router-link to="/foo">Go to Foo</router-link>
<router-view></router-view>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
// name: 'app'
// components: {
// HelloWorld
// }
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
vue 和 vue-router 版本
"vue": "^2.6.10",
"vue-router": "^3.1.3"
我不知道为什么它不起作用。你能帮助我吗?
解决方案
推荐阅读
- php - 如何修复我的 PHP 密码验证码?
- ignite - Scoped vs Singleton在.net web api中点燃客户端节点
- .htaccess - .htaccess 带有查询字符串的永久重定向
- performance - 如何计算流水线处理器的平均 CPI?
- gitkraken - 如何在 Windows 上使用 Git 存储库路径从命令行启动 GitKraken?
- python - 将 id 值存储在字典或重新查询数据库中是否更有效
- python - 检查python中的二维列表中是否已经存在一个数字
- sql - 使用 SQL 从 Scala 表中返回特定行
- regex - 用双引号吞没文本
- twilio - 在履行编辑器中对用户电话号码的 HTTP GET 请求