vue2.0---vue-router總結(專案基於vue-cli)

龍恩0707發表於2017-12-19

1. 在專案中安裝：

npm install vue-router --save

2. 在專案中的引入：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import Vuex from 'vuex';
import VueResource from 'vue-resource';

import App from './App';
import router from './router';
import store from './store';
// Resource
Vue.use(VueResource);

// vuex
Vue.use(Vuex);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
});

3. router.js的配置

我們先來看一下 router/index.js 程式碼如下：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
});

router常見的引數有如下：

3-1 mode 可選的引數有 hash 和 history;

hash: 預設為hash, 如果使用hash的話，頁面的地址就會加上 # 號就會比較不好看，如我們的地址變成如下：http://localhost:8080/#/
history: 我們使用history的話，那麼訪問頁面的時候就和平常一樣，不帶井號的；如下地址也可以訪問 http://localhost:8080/
router/index.js 配置程式碼變成如下：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

export default new Router({
  mode: 'history', // 訪問路徑不帶井號
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
});

3-2 base

應用的基路徑，比如整個單頁應用服務在 /page/app/ 下，那麼base就應該設定為 /page/app/. 一般寫成 __direname(在webpack中有配置)，當然你也可以寫成 /page/app/
router.js程式碼如下配置：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

export default new Router({
  mode: 'history', // 訪問路徑不帶井號
  base: '/page/app',  // 配置單頁應用的基路徑
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
});

因此頁面這樣訪問 http://localhost:8080/page/app/ 和 http://localhost:8080/ 訪問的效果是一樣的。

3-3 routers

基本的程式碼如下：

routes: [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/helloworld',
    name: 'HelloWorld',
    component: HelloWorld
  }
]

path: 就是我們訪問這個頁面的路徑。
name: 給這個頁面路徑定義一個名字，當在頁面進行跳轉的時候也可以使用名字跳轉。唯一性
component元件，就是使用import 引入的元件了。
引入元件還有一種懶載入的方式。懶載入引入的優點是：當你訪問這個頁面的時候才會去載入相關的資源，這樣的話能提高頁面的訪問速度。
比如如下這樣：component: resolve => require(['@/views/HelloWorld'], resolve) // 使用懶載入
因此router/index.js 可以寫成如下：

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

export default new Router({
  mode: 'history', // 訪問路徑不帶井號
  base: '/page/app',  // 配置單頁應用的基路徑
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve)  // 使用懶載入
    },
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve) // 使用懶載入
    }
  ]
});

3-4 router傳引數

首先我們在router/index.js 程式碼做如下配置：

{
  path: '/helloworld/:name', // 對路徑做攔截，這種型別的連結後面的內容會被vue-router對映成name引數了
  name: 'HelloWorld',
  component: resolve => require(['@/views/HelloWorld'], resolve) // 使用懶載入
}

當我們在頁面上訪問 http://localhost:8080/page/app/helloworld/xx=1 的時候，然後我們在 heeloworld這個元件內的created
的生命週期內，使用 console.log(this.$route.params.name); // xx=1 可以獲取到/helloworld/ 後面的所有的引數了。

3-4-2 Get請求傳引數

比如在頁面訪問的時候，可以使用問號(?)對引數進行傳遞；比如如下網址：

http://localhost:8080/page/app/helloworld?age=1

首先在router/index.js 程式碼先還原成如下：

{
  path: '/helloworld',
  name: 'HelloWorld',
  component: resolve => require(['@/views/HelloWorld'], resolve) // 使用懶載入
}

然後我們在helloworld元件內使用如下獲取：

let age = this.$route.query.age; //問號後面引數會被封裝進 this.$route.query;
console.log(age); // 列印出1

3-5 程式設計式導航

現在看看頁面是如何跳轉的了，主要是利用 <router-link>來建立可跳轉連結，我們還可以利用 this.$router.push('xxx')進行跳轉。
首先我們現在 router/index.js 新增 demo這個元件，然後從heeloworld這個頁面跳轉到demo這個元件頁面；如下router的配置：

routes: [
  {
    path: '/',
    name: 'HelloWorld',
    component: resolve => require(['@/views/HelloWorld'], resolve)  // 使用懶載入
  },
  {
    path: '/helloworld',
    name: 'HelloWorld',
    component: resolve => require(['@/views/HelloWorld'], resolve) // 使用懶載入
  },
  {
    path: '/demo',
    name: 'demo',
    component: resolve => require(['@/views/demo'], resolve) // 使用懶載入
  }
]

然後我們在helloworld元件新增如下程式碼：

<router-link to="/demo">點選我跳轉</router-link>

因此點選就可以跳轉了；
我們也可以使用 router-link 像get方式那要傳遞一些引數過，比如如下router-link程式碼：

<router-link :to="{path: '/demo', query:{'id': 22, 'name': 'kongzhi'}}">
  點選我跳轉
</router-link>

然後我們在demo元件內通過如下方式可以獲取值：

console.log(this.$route.query.id); // 22
console.log(this.$route.query.name); // kongzhi

我們也可以使用 this.$router.push('xxx')進行跳轉；如下程式碼：

<div @click="func()">點選進行跳轉</div>

JS程式碼如下：

methods: {
  func () {
    this.$router.push('/demo');
  }
}

可以有如下方式：

// 字串,這裡的字串是路徑path匹配噢，不是router配置裡的name
this.$router.push('/demo')

// 物件
this.$router.push({path: '/demo'});

/*
 * 命名的路由 跳轉到demo元件，因此位址列變成 http://localhost:8080/page/app/demo 
 * 在demo元件內 通過 console.log(this.$route); 列印如下資訊
 {
   fullPath: '/demo',
   hash: '',
   matched: [....],
   name: 'demo',
   params: {userId: 123},
   path: '/demo',
   query: {}
 }
 因此 我們可以通過 this.$route.params.userId 就可以獲取到傳遞的引數 userId了。
*/
this.$router.push({name: 'demo', params: { userId: 123 }})

/*
 帶查詢引數，跳到到demo元件內，因此位址列會變成如下：http://localhost:8080/page/app/demo?userId=1234
 然後我們和上面一樣 可以通過 this.$route.query.userId 就可以獲取到傳遞的引數 userId了。
*/
this.$router.push({path: 'demo', query: { userId: '1234' }});

3-6 導航鉤子

導航鉤子函式，主要是在導航跳轉的時候做一些操作，比如跳轉頁面之前，進行判斷，比如跳轉的時候，判斷是否某個欄位是否為true，如果為true，
則跳轉到A元件內，否則的話跳到B元件內。而鉤子函式根據其生效範圍可以分為全域性鉤子函式，路由獨享鉤子函式和元件內鉤子函式。

3-6-1 全域性鉤子函式
比如我們可以直接在 router/index.js 程式碼編寫程式碼邏輯，對一些全域性性的東西進行攔截。

router.beforeEach((to, from, next)=>{
  //do something
  next();
});
router.afterEach((to, from, next) => {
    console.log(to.path);
});

上面的鉤子方法接收三個採納數：
to: 即將要進入的目標路由物件。
from: 當前導航正要離開的路由。
next: 一定要呼叫該方法來 resolve這個鉤子。
next() 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed(確定的)。
next(false). 中斷當前的導航。
next('/')或next({path: '/'}), 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。

注意：確保要呼叫 next 方法，否則鉤子就不會被 resolved。
我們再來訪問頁面地址 http://localhost:8080/page/app/helloworld，然後在router/index 配置如下：

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
  mode: 'history', // 訪問路徑不帶井號
  base: '/page/app',  // 配置單頁應用的基路徑
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve)  // 使用懶載入
    },
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve) // 使用懶載入
    },
    {
      path: '/demo',
      name: 'demo',
      component: resolve => require(['@/views/demo'], resolve) // 使用懶載入
    }
  ]
});
router.beforeEach((to, from, next) => {
  // do something
  console.log(to.path); // 列印 /helloworld
  console.log(from.path); // 列印 /
  next();
});
router.afterEach((to, from, next) => {
  console.log(to.path); // 列印 /helloworld
  console.log(from.path); // 列印 /
});
export default router;

重新整理下頁面就可以看到呼叫 beforeEach 和 afterEach 的輸出了。

3-6-2 路由獨享鉤子函式

我們可以對單個的路由的跳轉進行攔截，對單個的路由使用 beforeEnter 函式，我們在router/index的檔案裡面可以如下編寫程式碼：

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
  mode: 'history', // 訪問路徑不帶井號
  base: '/page/app',  // 配置單頁應用的基路徑
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve)  // 使用懶載入
    },
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve), // 使用懶載入
      beforeEnter(to, from, next) {
        console.log(111)
        console.log(to.path); // 列印 /helloworld
        console.log(from.path); // 列印 /
        next(); // 跳到/helloworld 元件頁面
      }
    },
    {
      path: '/demo',
      name: 'demo',
      component: resolve => require(['@/views/demo'], resolve) // 使用懶載入
    }
  ]
});
export default router;

3-6-3 元件內鉤子函式

更細粒度的路由攔截，只針對一個進入某一個元件的攔截。
我們把 router/index的程式碼還原成如下：

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
  mode: 'history', // 訪問路徑不帶井號
  base: '/page/app',  // 配置單頁應用的基路徑
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve)  // 使用懶載入
    },
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve) // 使用懶載入
    },
    {
      path: '/demo',
      name: 'demo',
      component: resolve => require(['@/views/demo'], resolve) // 使用懶載入
    }
  ]
});
export default router;

然後對 helloworld 元件內的程式碼使用 beforeRouterEnter()方法進行攔截；如下HelloWorld.vue程式碼

export default {
  name: 'HelloWorld2',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  },
  created () {
    this.getInfo();
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件例項 `this`
    // 因為當鉤子執行前，元件例項還沒被建立
    console.log(to.path); // 列印 /helloworld
    console.log(from.path); // 列印 /
    next();  // 跳轉到 /helloworld 指定的頁面
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
    // 可以訪問元件例項 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以訪問元件例項 `this`
  }
};

鉤子函式使用場景:

其實路由鉤子函式在專案開發中用的並不是非常多，一般用於登入態的校驗，沒有登入跳轉到登入頁；許可權的校驗等等。

4. 滾動行為
在利用 vue-router 去做跳轉的時候，到了新頁面如果對頁面的滾動位置有要求的話，可以使用如下方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動到哪個的位置
  }
});

scrollBehavior 方法接收 to 和 from 路由物件。
第三個引數 savedPosition 當且僅當 popstate 導航 (mode為 history 通過瀏覽器的前進/後退按鈕觸發) 時才可用。

//所有路由新頁面滾動到頂部：
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

//如果有錨點
scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

比如在頁面是使用 <router-link> 做跳轉的時候，那麼到另一個頁面需要滾動到100px的時候，我們可以對全域性使用，也可以對某個路由時候，或者對某個
元件使用，下面我們是在 router/index.js 程式碼內對程式碼全域性使用如下：

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
  mode: 'history', // 訪問路徑不帶井號
  base: '/page/app',  // 配置單頁應用的基路徑
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve)  // 使用懶載入
    },
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: resolve => require(['@/views/HelloWorld'], resolve) // 使用懶載入
    },
    {
      path: '/demo',
      name: 'demo',
      component: resolve => require(['@/views/demo'], resolve) // 使用懶載入
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    return { x: 100, y: 100 }
  }
});
export default router;

當我們從 heeloworld.vue 元件內點選跳轉到 demo.vue的時候，在demo.vue會滾動100px；

vue-cli 專案結構
2019-02-16
Vue
Vue-Cli 專案基礎搭建
2019-05-06
Vue
vue-cli專案結構詳解
2017-12-25
Vue
總結一下基於 Lumen 框架的專案架構
2019-07-11
框架架構
基於vue-cli配置移動端rem自適應專案
2018-03-23
VueREM
vue（16）vue-cli建立專案以及專案結構解析
2021-07-15
Vue
【Vue專案總結】後臺管理專案總結
2019-06-18
Vue
BBS專案專案總結
2024-03-29
專案總結
2008-09-03
Vue.js(一) 基於vue-cli腳手架工具構建Vue專案
2017-05-19
Vue.js
vue-cli 實戰總結
2017-11-27
Vue
Vue-CLI 專案搭建
2022-04-18
Vue
科目二終於過了（各專案總結）
2015-07-11
Laravel 專案總結
2020-03-28
Laravel
Nuxt專案總結
2019-09-26
UX
番茄專案總結
2019-01-13
今日專案總結
2020-10-14
專案總結整理
2017-04-23
lync專案總結
2014-10-08
sap 專案總結
2015-05-08
專案總結【收集】
2010-08-10
專案總結之專案失誤
2005-04-06
Swift 專案總結 06 基於控制器的全域性狀態列管理
2018-06-02
Swift
關於開發Python專案的心得總結！
2019-07-06
Python
Vue + Canvas專案總結
2018-07-23
VueCanvas
小程式專案總結
2020-12-12
爬蟲專案總結
2020-08-31
爬蟲
小程式專案-總結
2018-03-08
SSH框架專案總結
2017-12-03
框架
專案（SIMIS）總結（序）
2008-04-22
準備專案總結
2008-07-08
Vue專案常用總結
2024-03-14
Vue
專案（Explore）總結之專案概述
2010-03-25
基於webmagic的爬蟲專案經驗小結
2015-12-05
Web爬蟲
關於vue基礎總結
2019-02-27
Vue
專案（Explore）總結之專案風險管理
2010-04-12
專案（Explore）總結之專案整合管理
2010-03-25
專案管理之---競投專案總結(轉)
2007-08-13
專案管理

vue2.0---vue-router總結(專案基於vue-cli)

相關文章