vue 開發(fā)之路由配置方法詳解
本文實(shí)例講述了vue 開發(fā)之路由配置方法。分享給大家供大家參考，具體如下：
概要
用 Vue.js + vue-router 創(chuàng)建單頁(yè)應(yīng)用，是非常簡(jiǎn)單的。使用 Vue.js ，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來(lái)，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。
實(shí)現(xiàn)代碼
1.在main.js 中引入 router.3
import router from './router/index'
2.在main.js 中使用router
global.globalVm = new Vue({
el: '#app',
router,
render: function(h) {
return h(App);
},
store,
watch: {
'$route' (to, from) {
globalVm.$dialog.loading.close();
curPath = to.name;
}
}
});
這里導(dǎo)入了 router 配置,頁(yè)面使用這個(gè)路由進(jìn)行頁(yè)面切換。
3. 組件渲染的位置。
我們可以看到 App.vue 組件，頁(yè)面組件渲染到 <router-view ></router-view>標(biāo)簽中。
<template>
<div id="app">
<transition :name='direction'>
<keep-alive>
<router-view :resize="Resize" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition :name='direction'>
<router-view :resize="Resize" v-if="!$route.meta.keepAlive"></router-view>
</transition>
<loading v-model="isLoading" String="加載中" ></loading>
</div>
</template>
router-view 這個(gè)是vue 組件渲染的地方。
4.組件路由配置
index.js 配置如下：
export default new Router({
routes: [
{
path: '/login',
name: 'login',
component: Login,
meta:{
layer:0
}
},
{
path: '/',
name: 'root',
redirect:"/index",
meta:{
layer:1
}
},
{
path: '/myToDo',
name: 'myToDo',
component: resolve => require(['@/components/bpm/MyToDo'], resolve),
meta:{
layer:2
}
},
{
path: '/MyAttend',
name: 'myAttend',
component: resolve => require(['@/components/bpm/MyAttend'], resolve),
meta:{
layer:2
}
},
{
path: '/getInstInfo/:instId/:type',
name: 'getInstInfo',
component:resolve => require(['@/components/bpm/GetInstInfo'], resolve),
mata:{
layer:3
}
},
4.1 根組件的配置
{
path: '/',
name: 'root',
redirect:"/index",
meta:{
layer:1
}
- path 是瀏覽器顯示的路徑。
- name：是組件的命令，我們?cè)诹鞒烫D(zhuǎn)是，使用name 進(jìn)行跳轉(zhuǎn)，而不要使用路徑跳轉(zhuǎn)，因?yàn)?路徑可以修改，只要name 不做修改，就可以正常工作。
- redirect: 這里表示 直接跳轉(zhuǎn)到 /index 組件。
- meta ：這個(gè)是可以擴(kuò)展的屬性，我們?cè)谶@里擴(kuò)展了一個(gè)layer屬性。
這個(gè)屬性是用來(lái)組件做切換使用的，通過(guò)這個(gè)layer 屬性，我們可以決定組件的動(dòng)畫。
App.vue 文件
4.2 登錄組件的配置
import Login from '@/components/Login'
{
path: '/login',
name: 'login',
component: Login,
meta:{
layer:0
}
}
component: Login
引入組件，指定登錄組件。
4.3 懶加載組件
當(dāng)打包構(gòu)建應(yīng)用時(shí)，Javascript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。
{
path: '/myToDo',
name: 'myToDo',
component: resolve => require(['@/components/bpm/MyToDo'], resolve),
meta:{
layer:2
}
}
component: resolve => require(['@/components/bpm/MyToDo'], resolve),
4.4 組件參數(shù)配置
{
path: '/task/:taskId',
name: 'task',
component:resolve => require(['@/components/bpm/TaskDetail'], resolve),
mata:{
layer:3
}
}
這里我們定義了一個(gè) taskId 參數(shù)。
4.5 組件切換
1.頁(yè)面中進(jìn)行切換。
<rx-list-item
v-for="item in list"
:key="item.id"
:href="{name:'task',params:{taskId:item.id}}" rel="external nofollow"
type='link'
class="item-a"
>
這里我們可以看到 ，指定了組件的名稱，還有參數(shù)配置。
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
2.編程方式進(jìn)行切換。
我們?cè)诒４鏀?shù)據(jù)成功后，需要跳轉(zhuǎn)到提示組件，我們可以使用一下代碼。
router.push({ name: 'user', params: { userId: 123 }})
4.6 路由HISTORY模式
vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。
url 路徑樣式為：
http://yoursite.com#/user/1
如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。
當(dāng)你使用 history 模式時(shí)，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue實(shí)現(xiàn)組件通信的八種方法實(shí)例
ue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來(lái)說(shuō)組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)組件通信的八種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
vue 動(dòng)態(tài)修改a標(biāo)簽的樣式的方法
這篇文章主要介紹了vue 動(dòng)態(tài)修改a標(biāo)簽的樣式的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要為大家介紹了前端面試之vue2和vue3的區(qū)別有哪些，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue使用el-upload實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了vue使用el-upload實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue3?計(jì)算屬性computed的實(shí)現(xiàn)原理
這篇文章主要介紹了Vue3?計(jì)算屬性computed的實(shí)現(xiàn)原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法，總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路2022-11-11
這篇文章主要介紹了記一次用vue做的活動(dòng)頁(yè)的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了在vue環(huán)境單頁(yè)面項(xiàng)目下,如何實(shí)現(xiàn)不定高虛擬列表,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue3采用xlsx庫(kù)實(shí)現(xiàn)本地上傳excel文件功能
這篇文章主要為大家詳細(xì)介紹了vue3如何采用xlsx庫(kù)實(shí)現(xiàn)本地上傳excel文件功能,并且前端解析為Json數(shù)據(jù),感興趣的小伙伴可以了解一下2025-02-02
Vue.js一個(gè)文件對(duì)應(yīng)一個(gè)組件實(shí)踐
Vue.js實(shí)現(xiàn)"一個(gè)文件對(duì)應(yīng)一個(gè)組件"，無(wú)需webpack等工具，按需加載組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10