粉丝福利 : 关注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>

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>

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

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

{{ msg }}

Essential Links