vue 開發(fā)之路由配置方法詳解
本文實例講述了vue 開發(fā)之路由配置方法。分享給大家供大家參考，具體如下：
概要
用 Vue.js + vue-router 創(chuàng)建單頁應(yīng)用，是非常簡單的。使用 Vue.js ，我們已經(jīng)可以通過組合組件來組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。
實現(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 配置,頁面使用這個路由進(jìn)行頁面切換。
3. 組件渲染的位置。
我們可以看到 App.vue 組件，頁面組件渲染到 <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 這個是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：是組件的命令，我們在流程跳轉(zhuǎn)是，使用name 進(jìn)行跳轉(zhuǎn)，而不要使用路徑跳轉(zhuǎn)，因為 路徑可以修改，只要name 不做修改，就可以正常工作。
- redirect: 這里表示 直接跳轉(zhuǎn)到 /index 組件。
- meta ：這個是可以擴(kuò)展的屬性，我們在這里擴(kuò)展了一個layer屬性。
這個屬性是用來組件做切換使用的，通過這個layer 屬性，我們可以決定組件的動畫。
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)用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(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
}
}
這里我們定義了一個 taskId 參數(shù)。
4.5 組件切換
1.頁面中進(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)行切換。
我們在保存數(shù)據(jù)成功后，需要跳轉(zhuǎn)到提示組件，我們可以使用一下代碼。
router.push({ name: 'user', params: { userId: 123 }})
4.6 路由HISTORY模式
vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當(dāng) URL 改變時，頁面不會重新加載。
url 路徑樣式為：
http://yoursite.com#/user/1
如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。
當(dāng)你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
vue實踐---vue不依賴外部資源實現(xiàn)簡單多語操作
這篇文章主要介紹了vue實踐---vue不依賴外部資源實現(xiàn)簡單多語操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單選項卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue3組件的開發(fā)，上一篇文章我們價紹了Vue3（三）網(wǎng)站首頁布局開發(fā)，今天繼續(xù)上篇內(nèi)容展開組件的開發(fā),需要的朋友可以參考一下2021-11-11
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue+高德地圖寫地圖選址組件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
最近在開發(fā)移動端項目，通過向左滑動出現(xiàn)刪除按鈕，點擊即可刪除，怎么實現(xiàn)這個功能呢，接下來小編給大家?guī)韺嵗a幫助大家學(xué)習(xí)vue項目實現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
這篇文章主要介紹了elementUI Tree 樹形控件的官方使用文檔，用清晰的層級結(jié)構(gòu)展示信息，可展開或折疊。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了vue+SSM實現(xiàn)驗證碼功能,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
國際化就是指在一個項目中，項目中的語言可以進(jìn)行切換（中英文切換），那么在實際項目中是如何實現(xiàn)的呢，本文就給大家詳細(xì)的介紹實現(xiàn)方法,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇在vue中利用v-html按分號將文本換行的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11