溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue 開發(fā)之路由配置方法詳解

發(fā)布時(shí)間：2020-09-05 13:04:09 來(lái)源：腳本之家 閱讀：120 作者：自由港 欄目：web開發(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.組件路由配置

vue 開發(fā)之路由配置方法詳解

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 文件

vue 開發(fā)之路由配置方法詳解

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)路由被訪問的時(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ì)有所幫助。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手