在上一篇文章中我们已经建立好一个项目了
现在我们进行编写更改里面的内容
目录中的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)
})
这是我的注册界面代码
打开后效果如下