Vue路由vue-router - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　在Web開發中，路由是指根據URL分配到對應的處理程序。對于大多數單頁面應用，都推薦使用官方支持的vue-router。Vue-router通過管理URL，實現URL和組件的對應，以及通過URL進行組件之間的切換。本文將詳細介紹Vue路由vue-router

安裝

　　在使用vue-router之前，首先需要安裝該插件

npm install vue-router

　　如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

　　如果使用全局的 script 標簽，則無須如此

使用

　　用Vue.js + vue-router創建單頁應用非常簡單。使用Vue.js ，已經可以通過組合組件來組成應用程序，把vue-router添加進來，需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們

　　下面是一個實例

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導航，通過傳入 `to` 屬性指定鏈接，<router-link> 默認會被渲染成一個 `<a>` 標簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口，路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義（路由）組件，可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是通過 Vue.extend() 創建的組件構造器，或者，只是一個組件配置對象。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 創建 router 實例，然后傳 `routes` 配置，當然還可以傳別的配置參數
const router = new VueRouter({
  routes // （縮寫）相當于 routes: routes
})

// 4. 創建和掛載根實例。
// 通過 router 配置參數注入路由，從而讓整個應用都有路由功能
const app = new Vue({
　　el:'#app',
　　router
})</script>

路由模式

　　vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載

http://localhost:8080/#/Hello

　　如果不想要很丑的 hash，可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

　　當使用 history 模式時，URL 就像正常的 url

http://localhost:8080/Hello

　　不過這種模式需要后臺配置支持。如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404

【服務器配置】

　　如果要使用history模式，則需要進行服務器配置

　　所以，要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是app 依賴的頁面

　　下面是一些配置的例子

apache

　　以wamp為例，需要對httpd.conf配置文件進行修改

　　首先，去掉rewrite_module前面的#號注釋

LoadModule rewrite_module modules/mod_rewrite.so

　　然后，將文檔所有的AllowOverride設置為all

AllowOverride all

　　最后，需要保存一個.htaccess文件放置在根路徑下面，文件內容如下

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

【注意事項】

　　這么做以后，服務器就不再返回404錯誤頁面，因為對于所有路徑都會返回 index.html 文件。為了避免這種情況，應該在Vue應用里面覆蓋所有的路由情況，然后再給出一個404頁面

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

　　或者，如果是用 Node.js 作后臺，可以使用服務端的路由來匹配 URL，當沒有匹配到路由的時候返回 404，從而實現 fallback

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const NotFound = {template:'<div>not found</div>'}

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', component: NotFound},
]

重定向和別名

【重定向】

　　重定向通過 routes 配置來完成，下面例子是從 /a 重定向到 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

　　重定向的目標也可以是一個命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

　　甚至是一個方法，動態返回重定向目標：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目標路由 作為參數
      // return 重定向的 字符串路徑/路徑對象
      return '/home'
    }}
  ]
})

　　對于不識別的URL地址來說，常常使用重定向功能，將頁面定向到首頁顯示

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', redirect: "/foo"},
]

【別名】

　　重定向是指，當用戶訪問 /a時，URL 將會被替換成 /b，然后匹配路由為 /b，那么別名是什么呢？/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣

　　上面對應的路由配置為

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

　　『別名』的功能可以自由地將 UI 結構映射到任意的 URL，而不是受限于配置的嵌套路由結構

　　處理首頁訪問時，常常將index設置為別名，比如將'/home'的別名設置為'/index'。但是，要注意的是，<router-link to="/home">的樣式在URL為/index時并不會顯示。因為，router-link只識別出了home，而無法識別index

根路徑

　　設置根路徑，需要將path設置為'/'

  <p>
    <router-link to="/">index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
]

　　但是，由于默認使用的是全包含匹配，即'/foo'、'/bar'也可以匹配到'/'，如果需要精確匹配，僅僅匹配'/'，則需要在router-link中設置exact屬性

  <p>
    <router-link to="/" exact>index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
]

嵌套路由

　　實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL中各段動態路徑也按某種結構對應嵌套的各層組件

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

　　借助 vue-router，使用嵌套路由配置，就可以很簡單地表達這種關系

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

const Home = { template: '<div>home</div>' }
const Foo = { template: `
  <div>
    <p>
      <router-link to="/foo/foo1">to Foo1</router-link>
      <router-link to="/foo/foo2">to Foo2</router-link>
      <router-link to="/foo/foo3">to Foo3</router-link>  
    </p>
    <router-view></router-view>
  </div>
  ` }
const Bar = { template: '<div>bar</div>' }
const Foo1 = { template: '<div>Foo1</div>' }
const Foo2 = { template: '<div>Foo2</div>' }
const Foo3 = { template: '<div>Foo3</div>' }

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo ,children:[
    {path:'foo1',component:Foo1},
    {path:'foo2',component:Foo2},
    {path:'foo3',component:Foo3},
  ]},
  { path: '/bar', component: Bar },
]

　　要特別注意的是，router的構造配置中，children屬性里的path屬性只設置為當前路徑，因為其會依據層級關系；而在router-link的to屬性則需要設置為完全路徑

　　如果要設置默認子路由，即點擊foo時，自動觸發foo1，則需要進行如下修改。將router配置對象中children屬性的path屬性設置為''，并將對應的router-link的to屬性設置為'/foo'

const Foo = { template: `
  <div>
    <p>
      <router-link to="/foo" exact>to Foo1</router-link>
      <router-link to="/foo/foo2">to Foo2</router-link>
      <router-link to="/foo/foo3">to Foo3</router-link>  
    </p>
    <router-view></router-view>
  </div>
  ` }

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo ,children:[
    {path:'',component:Foo1},
    {path:'foo2',component:Foo2},
    {path:'foo3',component:Foo3},
  ]},
  { path: '/bar', component: Bar },
]

　　結果如下所示

命名路由

　　有時，通過一個名稱來標識一個路由顯得更方便，特別是在鏈接一個路由，或者是執行一些跳轉時。可以在創建Router實例時，在routes配置中給某個路由設置名稱

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

　　要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

　　這跟代碼調用 router.push() 是一回事

router.push({ name: 'user', params: { userId: 123 }})

　　這兩種方式都會把路由導航到 /user/123 路徑

　　命名路由的常見用途是替換router-link中的to屬性，如果不使用命名路由，由router-link中的to屬性需要設置全路徑，不夠靈活，且修改時較麻煩。使用命名路由，只需要使用包含name屬性的對象即可

　　[注意]如果設置了默認子路由，則不要在父級路由上設置name屬性

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{ name: 'foo1' }">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

const Home = { template: '<div>home</div>' }
const Foo = { template: `
  <div>
    <p>
      <router-link :to="{ name: 'foo1' }" exact>to Foo1</router-link>
      <router-link :to="{ name: 'foo2' }" >to Foo2</router-link>
      <router-link :to="{ name: 'foo3' }" >to Foo3</router-link>  
    </p>
    <router-view></router-view>
  </div>
  ` }
const Bar = { template: '<div>bar</div>' }
const Foo1 = { template: '<div>Foo1</div>' }
const Foo2 = { template: '<div>Foo2</div>' }
const Foo3 = { template: '<div>Foo3</div>' }

const routes = [
  { path: '/', name:'home', component: Home },
  { path: '/foo', component: Foo ,children:[
    {path:'',name:'foo1', component:Foo1},
    {path:'foo2',name:'foo2', component:Foo2},
    {path:'foo3',name:'foo3', component:Foo3},
  ]},
  { path: '/bar', name:'bar', component: Bar },
]

　　結果如下所示

命名視圖

　　有時候想同時（同級）展示多個視圖，而不是嵌套展示，例如創建一個布局，有 sidebar（側導航）和 main（主內容）兩個視圖，這個時候命名視圖就派上用場了。可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果 router-view 沒有設置名字，那么默認為 default

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

　　一個視圖使用一個組件渲染，因此對于同個路由，多個視圖就需要多個組件。確保正確使用components配置

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

　　下面是一個實例

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{ name: 'foo' }">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
  </p>
  <router-view></router-view>
  <router-view name="side"></router-view>
</div>

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>Foo</div>'}
const MainBar = { template: '<div>mainBar</div>' }
const SideBar = { template: '<div>sideBar</div>' }

const routes = [
  { path: '/', name:'home', component: Home },
  { path: '/foo', name:'foo', component: Foo},
  { path: '/bar', name:'bar', components: {
    default: MainBar,
    side:SideBar
   } },
]

　　結果如下所示

動態路徑

　　經常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，有一個 User 組件，對于所有 ID 各不相同的用戶，都要使用這個組件來渲染。那么，可以在 vue-router 的路由路徑中使用動態路徑參數（dynamic segment）來達到這個效果

const User = {
  template: '<div>User</div>'
}
const router = new VueRouter({
  routes: [
    // 動態路徑參數以冒號開頭
    { path: '/user/:id', component: User }
  ]
})

　　現在，像 /user/foo 和 /user/bar 都將映射到相同的路由

　　下面是一個比較完整的實例，path:'/user/:id?'表示有沒有子路徑都可以匹配

<div id="app">
    <router-view></router-view>
    <br>
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'user'}">User</router-link>
    <router-link :to="{name:'bar'}">Go to Bar</router-link>
  </p>
</div>

const home = { template: '<div>home</div>'};
const bar = { template: '<div>bar</div>'};
const user = {template: `<div>
                          <p>user</p>
                          <router-link style="margin: 0 10px" :to="'/user/' + item.id" v-for="item in userList" key="item.id">{{item.userName}}</router-link>  
                      </div>`,
  data(){
    return{userList:[{id:1,userName:'u1'},{id:2,userName:'u2'},{id:3,userName:'u3'}]}
  }
};
const app = new Vue({
  el:'#app',
  router:new VueRouter({
    routes: [
      { path: '/', name:'home', component:home },
      { path: '/user/:id?', name:'user', component:user},
      { path: '/bar', name:'bar', component:bar},
    ],
  }), 
})

　　一個路徑參數使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。于是，可以更新 User 的模板，輸出當前用戶的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

　　下面是一個實例

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/bar">/user/bar</router-link>
  </p>
  <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
const app = new Vue({ router }).$mount('#app')
</script>

　　可以在一個路由中設置多段『路徑參數』，對應的值都會設置到 $route.params 中。例如：

模式     　　　　　　　　　　　　　　匹配路徑     　　　　　　$route.params
/user/:username     　　　　　　　/user/evan     　　　　{ username: 'evan' }
/user/:username/post/:post_id   /user/evan/post/123   { username: 'evan', post_id: 123 }

　　除了 $route.params 外，$route 對象還提供了其它有用的信息，例如，$route.query（如果 URL 中有查詢參數）、$route.hash 等等

【響應路由參數的變化】

　　使用路由參數時，例如從 /user/foo 導航到 user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用

　　復用組件時，想對路由參數的變化作出響應的話，可以簡單地 watch（監測變化） $route 對象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化作出響應...
    }
  }
}

　　[注意]有時同一個路徑可以匹配多個路由，此時，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高

　　下面是一個實例

const home = { template: '<div>home</div>'};
const bar = { template: '<div>bar</div>'};
const user = 
  {template: `<div>
    <p>user</p>
    <router-link style="margin: 0 10px" :to="'/user/' +item.type + '/'+ item.id" v-for="item in userList" key="item.id">{{item.userName}}</router-link>  
    <div v-if="$route.params.id">
      <div>id:{{userInfo.id}};userName:{{userInfo.userName}} ;type:{{userInfo.type}};</div>
    </div>
</div>`,
  data(){
    return{
      userList:[{id:1,type:'vip',userName:'u1'},{id:2,type:'common',userName:'u2'},{id:3,type:'vip',userName:'u3'}],
      userInfo:null,
    }
  },
  methods:{
    getData(){
      let id = this.$route.params.id;
      if(id){
        this.userInfo = this.userList.filter((item)=>{
          return item.id == id;
        })[0]
      }else{
        this.userInfo = {};
      }   
    }
  },
  created(){
    this.getData();
  },
  watch:{
    $route(){
      this.getData();
    },
  }
};
const app = new Vue({
  el:'#app',
  router:new VueRouter({
    routes: [
      { path: '/', name:'home', component:home },
      { path: '/user/:type?/:id?', name:'user', component:user},
      { path: '/bar', name:'bar', component:bar},
    ],
  }), 
})

查詢字符串

　　實現子路由，除了使用動態參數，也可以使用查詢字符串

const home = { template: '<div>home</div>'};
const bar = { template: '<div>bar</div>'};
const user = 
  {template: `<div>
    <p>user</p>
    <router-link style="margin: 0 10px" :to="'/user/' +item.type + '/'+ item.id" v-for="item in userList" key="item.id">{{item.userName}}</router-link>  
    <div v-if="$route.params.id">
      <div>id:{{userInfo.id}};userName:{{userInfo.userName}} ;type:{{userInfo.type}};</div>
      <router-link to="?info=follow" exact>關注</router-link>
      <router-link to="?info=share" exact>分享</router-link>
    </div>
</div>`,
  data(){
    return{
      userList:[{id:1,type:'vip',userName:'u1'},{id:2,type:'common',userName:'u2'},{id:3,type:'vip',userName:'u3'}],
      userInfo:null,
    }
  },
  methods:{
    getData(){
      let id = this.$route.params.id;
      if(id){
        this.userInfo = this.userList.filter((item)=>{
          return item.id == id;
        })[0]
      }else{
        this.userInfo = {};
      }   
    }
  },
  created(){
    this.getData();
  },
  watch:{
    $route(){
      this.getData();
    },
  }
};
const app = new Vue({
  el:'#app',
  router:new VueRouter({
    routes: [
      { path: '/', name:'home', component:home },
      { path: '/user/:type?/:id?', name:'user', component:user},
      { path: '/bar', name:'bar', component:bar},
    ],
  }), 
})

　　當需要設置默認查詢字符串時，進行如下設置

const user = 
  {template: `<div>
    <p>user</p>
    <router-link style="margin: 0 10px" :to="{path:'/user/' +item.type + '/'+ item.id,query:{info:'follow'}}" v-for="item in userList" key="item.id">{{item.userName}}</router-link>  
    <div v-if="$route.params.id">
      <div>id:{{userInfo.id}};userName:{{userInfo.userName}} ;type:{{userInfo.type}};</div>
      <router-link to="?info=follow" exact>關注</router-link>
      <router-link to="?info=share" exact>分享</router-link>
      {{$route.query}}
    </div>
</div>`,
  data(){
    return{
      userList:[{id:1,type:'vip',userName:'u1'},{id:2,type:'common',userName:'u2'},{id:3,type:'vip',userName:'u3'}],
      userInfo:null,
    }
  },
  methods:{
    getData(){
      let id = this.$route.params.id;
      if(id){
        this.userInfo = this.userList.filter((item)=>{
          return item.id == id;
        })[0]
      }else{
        this.userInfo = {};
      }   
    }
  },
  created(){
    this.getData();
  },
  watch:{
    $route(){
      this.getData();
    },
  }
};

滾動行為

　　使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它可以自定義路由切換時頁面如何滾動

　　[注意]這個功能只在 HTML5 history 模式下可用

　　當創建一個 Router 實例，可以提供一個 scrollBehavior 方法。該方法在前進、后退或切換導航時觸發

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

　　scrollBehavior 方法返回 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的前進/后退按鈕觸發) 時才可用，返回滾動條的坐標{x:number,y:number}

　　如果返回一個布爾假的值，或者是一個空對象，那么不會發生滾動

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

　　對于所有路由導航，簡單地讓頁面滾動到頂部。返回 savedPosition，在按下后退/前進按鈕時，就會像瀏覽器的原生表現那樣：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

　　下面是一個實例，點擊導航進行切換時，滾動到頁面頂部；通過前進、后退按鈕進行切換時，保持坐標位置

const router = new VueRouter({
  mode:'history',
  routes ,
  scrollBehavior (to, from, savedPosition){
    if(savedPosition){
      return savedPosition;
    }else{
      return {x:0,y:0}
    }
  }
})

　　還可以模擬『滾動到錨點』的行為：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

　　下面是一個實例

<div id="app">
    <router-view></router-view>
    <br>
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'foo' ,hash:'#abc'}">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
  </p>
</div>

const router = new VueRouter({
  mode:'history',
  routes ,
  scrollBehavior (to, from, savedPosition){
    if(to.hash){
      return {
        selector: to.hash
      }
    }
    if(savedPosition){
      return savedPosition;
    }else{
      return {x:0,y:0}
    }
  }
})

過渡動效

　　<router-view> 是基本的動態組件，所以可以用 <transition> 組件給它添加一些過渡效果：

<transition>
  <router-view></router-view>
</transition>

　　下面是一個實例

  .router-link-active{background:pink;}
  .v-enter,.v-leave-to{
    opacity:0;
  }
  .v-enter-active,.v-leave-active{
    transition:opacity .5s;
  }

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'foo'}">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
    <transition>
        <router-view></router-view>
    </transition>
  </p>
</div>

【單個路由過渡】

　　上面的用法會給所有路由設置一樣的過渡效果，如果想讓每個路由組件有各自的過渡效果，可以在各路由組件內使用 <transition> 并設置不同的 name

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}
const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

路由元信息

　　定義路由的時候可以配置 meta 字段：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

　　routes配置中的每個路由對象被稱為路由記錄。路由記錄可以是嵌套的，因此，當一個路由匹配成功后，它可能匹配多個路由記錄。例如，根據上面的路由配置，/foo/bar 這個URL將會匹配父路由記錄以及子路由記錄

　　一個路由匹配到的所有路由記錄會暴露為 $route 對象（還有在導航鉤子中的 route 對象）的 $route.matched 數組。因此，需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段

　　下面例子展示在全局導航鉤子中檢查 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() 
  }
})

【基于路由的動態過渡】

　　可以基于當前路由與目標路由的變化關系，動態設置過渡效果。通過使用路由元信息，在每個路由對象上設置一個index屬性保存其索引值

  <style>
  .router-link-active{background:pink;}
  .left-enter{
    transform:translateX(100%);
  }
  .left-leave-to{
    transform:translateX(-100%);
  }
  .left-enter-active,.left-leave-active{
    transition:transform .5s;
  }
  .right-enter{
    transform:translateX(-100%);
  }
  .right-leave-to{
    transform:translateX(100%);
  }
  .right-enter-active,.right-leave-active{
    transition:transform .5s;
  }  
  </style>

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'foo'}">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
    <transition :name="transitionName">
        <router-view></router-view>
    </transition>
  </p>
</div>

const app = new Vue({
  el:'#app',
  router,
  data () {
    return {
      'transitionName': 'left'
    }
  },
  watch: {
    '$route' (to, from) {
      this['transitionName'] = to.meta.index > from.meta.index ? 'right' : 'left';

    }
  },  
})

編程式導航

　　除了使用<router-link>創建a標簽來定義導航鏈接，還可以借助router的實例方法，通過編寫代碼來實現

【router.push(location)】

　　想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

　　當點擊 <router-link> 時，這個方法會在內部調用，所以說，點擊 <router-link :to="..."> 等同于調用 router.push(...)

聲明式     　　　　　　　　　　　　編程式
<router-link :to="...">     router.push(...)

　　該方法的參數可以是一個字符串路徑，或者一個描述地址的對象。例如：

// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

【router.replace(location)】

　　跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄

聲明式                 　　　　　　　　　　編程式
<router-link :to="..." replace>     router.replace(...)

【router.go(n)】

　　這個方法的參數是一個整數，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)

// 在瀏覽器記錄中前進一步，等同于 history.forward()
router.go(1)
// 后退一步記錄，等同于 history.back()
router.go(-1)
// 前進 3 步記錄
router.go(3)
// 如果 history 記錄不夠用，就靜默失敗
router.go(-100)
router.go(100)

【操作history】

　　router.push、router.replace和router.go跟history.pushState、history.replaceState和history.go類似，實際上它們確實是效仿window.historyAPI的。vue-router的導航方法(push、replace、go)在各類路由模式(history、 hash和abstract)下表現一致

導航鉤子

　　vue-router 提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。有多種方式可以在路由導航發生時執行鉤子：全局的、單個路由獨享的或者組件級的

【全局鉤子】

　　可以使用 router.beforeEach 注冊一個全局的 before 鉤子

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

　　當一個導航觸發時，全局的 before 鉤子按照創建順序調用。鉤子是異步解析執行，此時導航在所有鉤子 resolve 完之前一直處于 等待中。

　　每個鉤子方法接收三個參數：

to: Route: 即將要進入的目標路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

　　下面是next()函數傳遞不同參數的情況

next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。
next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。

　　[注意]確保要調用 next 方法，否則鉤子就不會被 resolved。

　　同樣可以注冊一個全局的 after 鉤子，不過它不像 before 鉤子那樣，after 鉤子沒有 next 方法，不能改變導航：

router.afterEach(route => {
  // ...
})

　　下面是一個實例

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>Foo</div>'}
const Bar = { template: '<div>bar</div>' }
const Login = { template: '<div>請登錄</div>' }
const routes = [
  { path: '/', name:'home', component: Home,meta:{index:0}},
  { path: '/foo', name:'foo', component:Foo,meta:{index:1,login:true}},
  { path: '/bar', name:'bar', component:Bar,meta:{index:2}},
  { path: '/login', name:'login', component:Login,},
]
const router = new VueRouter({
  routes ,
})
router.beforeEach((to, from, next) => {
  if(to.meta.login){
    next('/login');
  }
  next();
});
router.afterEach((to, from)=>{
  document.title = to.name;
})
const app = new Vue({
  el:'#app',
  router,
})

【單個路由獨享】

　　可以在路由配置上直接定義 beforeEnter 鉤子

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

　　這些鉤子與全局 before 鉤子的方法參數是一樣的

【組件內鉤子】

　　可以在路由組件內直接定義以下路由導航鉤子

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用，不能獲取組件實例 `this`，因為當鉤子執行前，組件實例還沒被創建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該組件被復用時調用。舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉時，由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。可以訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用，可以訪問組件實例 `this`
  }
}

　　beforeRouteEnter鉤子不能訪問this，因為鉤子在導航確認前被調用，因此即將登場的新組件還沒被創建

　　不過，可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，并且把組件實例作為回調方法的參數

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問組件實例
  })
}

　　可以在 beforeRouteLeave 中直接訪問 this。這個 leave 鉤子通常用來禁止用戶在還未保存修改前突然離開。可以通過 next(false) 來取消導航

數據獲取

　　有時候，進入某個路由后，需要從服務器獲取數據。例如，在渲染用戶信息時，需要從服務器獲取用戶的數據。可以通過兩種方式來實現：

　　1、導航完成之后獲取：先完成導航，然后在接下來的組件生命周期鉤子中獲取數據。在數據獲取期間顯示『加載中』之類的指示

　　2、導航完成之前獲取：導航完成前，在路由的 enter 鉤子中獲取數據，在數據獲取成功后執行導航。

　　從技術角度講，兩種方式都不錯 —— 就看想要的用戶體驗是哪種

【導航完成后獲取】

　　當使用這種方式時，會馬上導航和渲染組件，然后在組件的 created 鉤子中獲取數據。有機會在數據獲取期間展示一個 loading 狀態，還可以在不同視圖間展示不同的 loading 狀態。

　　假設有一個 Post 組件，需要基于 $route.params.id 獲取文章數據：

<template>
  <div class="post">
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 組件創建完后獲取數據，
    // 此時 data 已經被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有變化，會再次執行該方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

【導航完成前獲取數據】

　　通過這種方式，在導航轉入新的路由前獲取數據。可以在接下來的組件的 beforeRouteEnter 鉤子中獲取數據，當數據獲取成功后只調用 next 方法

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      if (err) {
        // display some global error message
        next(false)
      } else {
        next(vm => {
          vm.post = post
        })
      }
    })
  },
  // 路由改變前，組件就已經渲染完了
  // 邏輯稍稍不同
  watch: {
    $route () {
      this.post = null
      getPost(this.$route.params.id, (err, post) => {
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

　　在為后面的視圖獲取數據時，用戶會停留在當前的界面，因此建議在數據獲取期間，顯示一些進度條或者別的指示。如果數據獲取失敗，同樣有必要展示一些全局的錯誤提醒

懶加載

　　當打包構建應用時，JS包會變得非常大，影響頁面加載。如果能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了

　　結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實現路由組件的懶加載。

　　首先，可以將異步組件定義為返回一個 Promise 的工廠函數(該函數返回的Promise應該 resolve 組件本身)

const Foo = () => Promise.resolve({ /*  組件定義對象 */ })

　　在 webpack 2中，使用動態 import語法來定義代碼分塊點(split point):

import('./Foo.vue') // returns a Promise

　　[注意]如果使用的是 babel，需要添加syntax-dynamic-import插件，才能使 babel 可以正確地解析語法

　　結合這兩者，這就是如何定義一個能夠被 webpack自動代碼分割的異步組件

const Foo = () => import('./Foo.vue')

　　在路由配置中什么都不需要改變，只需要像往常一樣使用 Foo:

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

【把組件按組分塊】

　　有時候想把某個路由下的所有組件都打包在同個異步塊(chunk)中。只需要使用命名 chunk，一個特殊的注釋語法來提供chunk name(需要webpack > 2.4)

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

　　webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds