Vue实现路由的配置

在上一篇文章中我们已经建立好一个项目了
现在我们进行编写更改里面的内容
目录中的HelloWorld.Vue可以删掉
新建一个router文件夹里边用来放路由

router下index.vue中的内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login' //此处为自己建的界面所配置的路由
import Main from '../components/Main' //此处为自己建的界面所配置的路由
import Register from '../components/Register' //此处为自己建的界面所配置的路由
//安装路由
Vue.use(Router);
export default new Router({
    routes:[
        {
            path:'/login',
            component:Login,//此处进行连接
        },
        {
            path:'/main',
            component:Main,
        },
       
        {
            path:'/register',
            component:Register,
        }
    ]
});

App.vue的内容更改为如下内容

<template>
  <div id="app">
      <router-view></router-view>   <!-- 此处为路由引的界面 -->
  </div>
</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 router from './router' //自动扫描路由配置
Vue.config.productionTip = false
//显示声明router
Vue.use(router);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
 render:h=>h(App)
})

这是我的注册界面代码
打开后效果如下