关于配置了路由但是页面不显示内容
发布于 7 年前 作者 wangtao 6100 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

本人新手一枚,想搭建vue 2.0的路由,但是一直不成功,一下是我参考网上资料写的配置,请大神帮忙看看,找一下问题!以下是代码

【index.html】

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue_project2</title> </head> <body>
</body> </html>

【App.vue】 <template>

<router-view></router-view>
</template> <script> export default { name: 'app' } </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>

【main.js】 // The Vue build version to load with the import command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from ‘vue’ import App from ‘./App’ import VueRouter from ‘vue-router’ import Hello from ‘@/components/Hello’ import Home from’@/components/home/home’ import Login from’@/components/login’ Vue.use(VueRouter) Vue.config.productionTip = false

const routes = new VueRouter({ mode:‘history’, base:__dirname, routes:[ { path:’/’, name:‘Hello’, component:Hello }, { path:’/login’, name:‘login’, component:Login } ] })

/* eslint-disable no-new */ new Vue({ el:’#app’, routes })

【Hello.vue】 <template>

{{ msg }}

Essential Links

<router-link to="/home">home</router-link> <router-link to="/login"}>login</router-link>
</template> <script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

【login.vue】 <template>

我是login
</template>

<script> </script> <style> </style>

页面提示不报错,这段文字:Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools

不知道如何解决了,请大神帮忙一下,感激不尽!!!

回到顶部