我们在view文件夹里面新建一个login页面，为了让项目看起来更清晰，我们按照模块进行分类。
image.png
login.vue文件内我们输入一段文字
<div class="wrapper">
login 页面
</div>
</template>
<script>
export default {
name: 'Login',
components: {},
props: {},
data () {
return {
}
},
watch: {},
computed: {},
methods: {},
created () {},
mounted () {}
}
</script>
<style lang="scss" scoped>
.wrapper{
font-size: 16px;
}
</style>
我们在index路由里面配置一下。
import VueRouter from 'vue-router'
import Login from '../views/login/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login
}
]
const router = new VueRouter({
routes
})
export default router
我们把之前新建项目时系统给我们建的 about home 路由删除，配置上login的路由，对应的吧about home路由对应的页面删除。现在view中只留下login页面。
image.png
下面我们运行下项目,页面正常展示。
image.png
