通過這篇文章，我們可以知道如何通過Vue路由方式實現登入頁面的訪問。主要知識點包括：

Vue元件路由訪問

一、通過Vue-Cli建立一個專案

安裝Vue-Cli之後，通過vue ui命令啟動專案管理器頁面。如果是第一次建立專案會自動進入專案管理器頁面，如下：

如果非第一次建立專案，在左上角列表中選擇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/#/直接訪問到登入頁面，如下

這樣一個登入頁面已經實現，接著就是如何去設計登入頁面。下一篇將繼續。