通过这篇文章，我们可以知道如何通过Vue路由方式实现登录页面的访问。主要知识点包括：
- Vue组件
- 路由访问
一、通过Vue-Cli创建一个项目
安装Vue-Cli之后，通过vue ui命令启动项目管理器页面。如果是第一次创建项目会自动进入项目管理器页面，如下：
Vue项目管理器页面
如果非第一次创建项目，在左上角列表中选择Vue项目管理器，进入上图页面。如下图所示：
进入Vue项目管理器路径
二、项目结构清理
创建项目之后，进入项目目录下，将里面的样例内容全部清除
App.vue
<template><div id='app'> 项目主页面</div></template><script>export default { name: 'app'}</script><style></style>
router/index.js
import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = []const router = new VueRouter({ routes})export default router
三、添加并访问登录页面
1.添加登录组件
components目录下新建Login.vue,并添加三块固定内容
<template> <div>登录页面</div></template><script>export default { }</script><style lang="less" scoped></style>
2.路由中导入登录组件
router/index.js
import Vue from 'vue'import VueRouter from 'vue-router'import Login from '../components/Login'Vue.use(VueRouter)const routes = [ { path: '/login', component: Login}]const router = new VueRouter({ routes})export default router
3.App.vue中添加路由占位符
这样使得router/index.js中路由匹配到的组件都会被渲染到router-view占位符中显示
<template><div id='app'> <router-view></router-view></div></template><script>export default { name: 'app'}</script><style></style>
4.启动项目
访问http://localhost:8080/#/login, 登录页面已经可以正常访问
这里我们必须通过/login来访问登录页面，如果希望默认情况下就直接访问登录页面，可以在路由中添加路由信息{ path: '/', redirect: '/login' },，如下：
router/index.js
import Vue from 'vue'import VueRouter from 'vue-router'import Login from '../components/Login'Vue.use(VueRouter)const routes = [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }]const router = new VueRouter({ routes})export default router
这样我们可以通过http://localhost:8080/#/直接访问到登录页面，如下
这样一个登录页面已经实现，接着就是如何去设计登录页面。下一篇将继续。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。