本文實例講述了vue 開發(fā)之路由配置方法。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)裕華,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

概要

用 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è)計有所幫助。

分享文章：vue開發(fā)之路由配置方法詳解
標(biāo)題URL：http://chinadenli.net/article20/gpdjco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、ChatGPT、企業(yè)建站、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)