VueJS不使用“/”路线打开主页
我想显示一个带有h1文本的简单主页，但它不起作用。我配置了路由并将其添加到main.js. 当我浏览到localhost:8080什么都没有显示时。我看不出它不起作用的原因。
主文件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
应用程序
<template>
<div>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
主页.vue
<template>
<div>
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'home'
}
</script>
/路由器/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>client</title>
</head>
<body>
<noscript>
<strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
九州编程1回答
-
幕布斯6054654
@vue/cli默认情况下仅使用 vue 运行时，而不使用vue 编译器（如果要使用内联模板字符串，则需要编译器）要解决此问题，您可以在以下文件中打开 runtimeCompilervue.config.js：module.exports = { "runtimeCompiler": true};或者更改您的代码以使用该render()函数：new Vue({ el: '#app', router, components: { App }, template: '<App/>'})到new Vue({ router, render: h => h(App)}).$mount("#app")顺便说一句，如果您正在使用@vue/cli，则可以选择Manually select featuresduring vue create。当您选择Router一个功能时，您将获得一个启动的项目，vue-router该项目将开箱即用。
随时随地看视频慕课网APP
相关分类
JavaScript