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