通過這篇文章，我們可以知道如何通過Vue路由方式實現(xiàn)登錄頁面的訪問。主要知識點包括：
- Vue組件
- 路由訪問
一、通過Vue-Cli創(chuàng)建一個項目
安裝Vue-Cli之后，通過vue ui命令啟動項目管理器頁面。如果是第一次創(chuàng)建項目會自動進(jìn)入項目管理器頁面，如下：
Vue項目管理器頁面
如果非第一次創(chuàng)建項目，在左上角列表中選擇Vue項目管理器，進(jìn)入上圖頁面。如下圖所示：
進(jìn)入Vue項目管理器路徑
二、項目結(jié)構(gòu)清理
創(chuàng)建項目之后，進(jìn)入項目目錄下，將里面的樣例內(nèi)容全部清除
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,并添加三塊固定內(nèi)容
<template> <div>登錄頁面</div></template><script>export default { }</script><style lang="less" scoped></style>
2.路由中導(dǎo)入登錄組件
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, 登錄頁面已經(jīng)可以正常訪問
這里我們必須通過/login來訪問登錄頁面，如果希望默認(rèn)情況下就直接訪問登錄頁面，可以在路由中添加路由信息{ 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/#/直接訪問到登錄頁面，如下
這樣一個登錄頁面已經(jīng)實現(xiàn)，接著就是如何去設(shè)計登錄頁面。下一篇將繼續(xù)。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。