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í)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語(yǔ)操作
這篇文章主要介紹了vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語(yǔ)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue3組件的開發(fā)，上一篇文章我們價(jià)紹了Vue3（三）網(wǎng)站首頁(yè)布局開發(fā)，今天繼續(xù)上篇內(nèi)容展開組件的開發(fā),需要的朋友可以參考一下2021-11-11
解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了vue+高德地圖寫地圖選址組件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
最近在開發(fā)移動(dòng)端項(xiàng)目，通過(guò)向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來(lái)小編給大家?guī)?lái)實(shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
這篇文章主要介紹了elementUI Tree 樹形控件的官方使用文檔，用清晰的層級(jí)結(jié)構(gòu)展示信息，可展開或折疊。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要介紹了vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
在vue3項(xiàng)目中實(shí)現(xiàn)國(guó)際化的代碼示例
國(guó)際化就是指在一個(gè)項(xiàng)目中，項(xiàng)目中的語(yǔ)言可以進(jìn)行切換（中英文切換），那么在實(shí)際項(xiàng)目中是如何實(shí)現(xiàn)的呢，本文就給大家詳細(xì)的介紹實(shí)現(xiàn)方法,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇在vue中利用v-html按分號(hào)將文本換行的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11