VUE三 vue-router（路由）詳解

前端路由

根據不同的 url 地址展示不同的內容或頁面，無需依賴服務器根據不同URL進行頁面展示操作

 

優點

• 用戶體驗好，不需要每次都從服務器全部獲取，快速展現給用戶

 

缺點

• 使用瀏覽器的前進，后退鍵的時候會重新發送請求，沒有合理地利用緩存
• 單頁面無法記住之前滾動的位置，無法在前進，后退的時候記住滾動的位置

 

一、路由（以user為例）

userList-->用戶列表頁的路由所加載的代碼（router-->index.js）

import Vue from 'vue'     //引入vue
import Router from 'vue-router'     //引入vue-router
import userList from '@/components/userList'      //引入根目錄下的user.vue組件

Vue.use(Router)      //vue全局使用Router

export default new Router({
  routes: [      //配置路由，這里是個數組
    {
      path: '/userList',      //鏈接路徑
      name: 'userList',       //路由名稱
      component: userList     //對應的組件模板
    }
  ]
})

 

userList-->用戶列表頁代碼（userList.vue）

<template>
  <div>展示用戶列表頁</div>
</template>

<script>
export default {
  name: 'userList',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

打開網址：http://localhost:8080/#/userList  顯示如上模板解析頁。

注意：其中 # 為哈希，mode:hash 若要用原始類型的網址，則mode:history。

 

 

二、動態路由匹配

模式	匹配路徑	獲取動態路由參數
/user/:username	/user/nina	$route.params.username
/user?:username	/user?username=nina	$route.query.username

 

還是以userList為例

創建一個 userList 組件，對於所有 ID 各不相同的用戶，都要使用這個組件來渲染。所以，我們需要在 vue-router 的路由路徑中使用『動態路徑參數』來達到這個效果。

 

userList-->用戶列表頁的路由所加載的代碼（router-->index.js）

import Vue from 'vue'
import Router from 'vue-router'
import userList from '@/components/userList'

Vue.use(Router)

export default new Router({
  routes: [
  
    {
      path: '/userList/:userId',   //動態設置路由參數
      name: 'userList',
      component: userList
    }
  ]
})

 

user-->用戶列表頁代碼（userList.vue）

<template>

  <div>
    <div>展示用戶列表頁</div>
    <div>用戶ID</div>
    <span>{{$route.params.userId}}</span>  //獲取用戶userId
  </div>

</template>

<script>
export default {
  name: 'userList',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

 

 打開網址：http://localhost:8080/#/userList/0006 可以看到用userList組件渲染出來的userId顯示在頁面上。

 

三、嵌套路由

選項卡，在選項卡中，頂部有數個導航欄，中間顯示的是主體內容，這個時候，整個頁面是一個路由，然后點擊選項卡切換不同的路由來展示不同的內容，這個時候就是路由中嵌套路由。
用戶信息列表頁，在用戶信息列表中，會有用戶的基本信息頁，用戶的密碼修改頁等也需要路由的嵌套

 

以userList列表頁為例

 userList-->用戶列表頁的路由所加載的代碼（router-->index.js）

import Vue from 'vue'
import Router from 'vue-router'
import userList from '@/components/userList'
import userInfo from '@/components/userInfo'
import changePaw from '@/components/changePaw'

Vue.use(Router)

export default new Router({
  routes: [
  
    {
      path: '/userList',
      name: 'userList',
      component: userList,
      children:[
          {
              path:'userInfo',
              name:'userInfo',
              component:userInfo
          },
          {
              path:'changePaw',
              name:'changePaw',
              component:changePaw
          }
      ]
    }
  ]
})

 

useruserList-->用戶列表頁代碼（userList.vue）

<template>

  <div>
    <div>展示用戶列表頁</div>
    <router-link to="/userList/userInfo">用戶基本信息頁</router-link>    //to后必須用絕對地址
    <router-link to="/userList/changePaw">修改密碼頁</router-link>
    <div>
    <router-view></router-view>
    </div>
    
  </div>

</template>

<script>
export default {
  name: 'userList',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

 

兩個子頁面-->用戶基本信息頁（userInfo.vue）

<template>

  <div>
    <div>用戶基本信息頁</div>
    
  </div>

</template>

<script>
export default {
  name: 'userInfo',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

 

兩個子頁面-->用戶修改密碼頁（changePaw.vue）

<template>

  <div>
    <div>用戶修改密碼頁</div>
    
  </div>

</template>

<script>
export default {
  name: 'changePaw',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

 

 打開網址：http://localhost:8080/#/userList 可以看到用userList組件渲染出來頁面上，有兩個導航（用戶基本信息頁、用戶修改密碼頁）可以來回切換

 

四、編程式路由

通過js來實現頁面的跳轉

• $router.push("name")
• $router.push({path:"name"})
• $router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
• $router.go(1)

 

 （1）先用常用的<router-link>為例

以userList列表頁為例，添加跳轉到產品中心的鏈接。

 userList-->用戶列表頁的路由所加載的代碼（router-->index.js）

import Vue from 'vue'
import Router from 'vue-router'
import userList from '@/components/userList'
import productCenter from '@/components/productCenter'


Vue.use(Router)

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

 

 

useruserList-->用戶列表頁代碼（userList.vue）

<template>

  <div>
    <div>展示用戶列表頁</div>
    <router-link to="/productCenter">產品中心頁</router-link> 
  </div>

</template>

<script>
export default {
  name: 'userList',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

 

 產品中心頁（productCenter.vue）

<template>

  <div>
    <div>產品列表頁</div>
    
  </div>

</template>

<script>
export default {
  name: 'productCenter',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

 

 打開網址：http://localhost:8080/#/userList 可以看到用userList組件渲染出來頁面上，有個跳轉導航（產品中心頁），點擊可以跳轉到產品中心頁。

 

（2）$router.push("name")   ==》其中如例一中，只改變userList.vue中的跳轉方式

 

<template>

  <div>
    <div>展示用戶列表頁</div>
    <button @click="jump">產品中心頁</button>  //添加跳轉事件
  </div>

</template>

<script>
export default {
  name: 'userList',
  data () {
    return {
      msg: ''
    }
  },
  methods:{
      jump(){
        this.$router.push('/productCenter')  //應用js跳轉事件進行跳轉
      }
    }
}
</script>


<style scoped>

</style>

 

 （2）$router.push({path:"name"}) ==》其中如例一中，只改變userList.vue中的跳轉方式

 

<template>

  <div>
    <div>展示用戶列表頁</div>
    <button @click="jump">產品中心頁</button>
  </div>

</template>

<script>
export default {
  name: 'userList',
  data () {
    return {
      msg: ''
    }
  },
  methods:{
      jump(){
        this.$router.push({path:'/productCenter'})
      }
    }
}
</script>


<style scoped>

</style>

 

 

  （3）$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})

==》其中如例一中，只改變userList.vue中的跳轉方式，並在產品中心頁（productCenter.vue）接收參數用query接收

userList.vue

<template>

  <div>
    <div>展示用戶列表頁</div>
    <button @click="jump">產品中心頁</button>
  </div>

</template>

<script>
export default {
  name: 'userList',
  data () {
    return {
      msg: ''
    }
  },
  methods:{
      jump(){
        this.$router.push({path:'/productCenter?userId=0001'})
      }
    }
}
</script>


<style scoped>

</style>

 

 productCenter.vue-->接收傳過來的參數

<template>

  <div>
    <div>產品列表頁</div>
    <div>接收參數
        <span>{{$route.query.userId}}</span>  //接收頁面切換過來的參數
    </div>
  </div>

</template>

<script>
export default {
  name: 'productCenter',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

注意組件與組件之前路由切換的時候傳遞用params
頁面之間的切換（比如？拼接的方式）傳遞用jquery

 

 五、命名路由和命名視圖

• 給路由定義不同的名字，根據路由的名字進行匹配
• 給不同的router-view定義名字，通過名字進行對應組件的渲染

 

（1）命名路由

以userList列表頁為例，添加跳轉到產品中心的鏈接。

userList-->用戶列表頁的路由所加載的代碼（router-->index.js）

import Vue from 'vue'
import Router from 'vue-router'
import userList from '@/components/userList'
import productCenter from '@/components/productCenter'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/userList',
      name: 'userList',
      component: userList,
    },
    {
        path:'/productCenter',
        name:'productCenter',   //定義路由的名字
        component:productCenter
    }
  ]
})

 

 useruserList-->用戶列表頁代碼（userList.vue）

<template>

  <div>
    <div>展示用戶列表頁</div>
    <router-link v-bind:to="{name:'productCenter'}">產品中心頁</router-link>  //跳轉到與路由名字相同的路由地址
  </div>

</template>

<script>
export default {
  name: 'userList',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

 

產品中心頁（productCenter.vue）

<template>

  <div>
    <div>產品列表頁</div>
    
  </div>

</template>

<script>
export default { name: 'productCenter', data () { return { msg: '' } } } </script> <style scoped> </style>

 

 

（2）跳轉到產品中心的路由為動態路由

userList-->用戶列表頁的路由所加載的代碼（router-->index.js）

import Vue from 'vue'
import Router from 'vue-router'
import userList from '@/components/userList'
import productCenter from '@/components/productCenter'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/userList',
      name: 'userList',
      component: userList,
    },
    {
        path:'/productCenter/:userId',    //為動態路由
        name:'productCenter',
        component:productCenter
    }
  ]
})

 

useruserList-->用戶列表頁代碼（userList.vue）

<template>

  <div>
    <div>展示用戶列表頁</div>
    <router-link v-bind:to="{name:'productCenter',params:{userId:0001}}">產品中心頁</router-link>  //跳轉到與路由名字相同的路由地址,params是路由的參數，不是頁面跳轉參數
  </div>

</template>

<script>
export default { name: 'userList', data () { return { msg: '' } } } </script> <style scoped> </style>

 

 

（2）命名視圖

 路由所加載的代碼（router-->index.js）

import Vue from 'vue'
import Router from 'vue-router'
import userList from '@/components/userList'
import userInfo from '@/components/userInfo'
import changePaw from '@/components/changePaw'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'userList',
      components: {
          default:userList,
          userInfo:userInfo,
          changePaw:changePaw
      }
    }
  ]
})

 

App.vue-->再瀏覽器輸入根網址后，頁面會展示出路由所加載的所有頁面信息。

<template>
  <div id="app">
  <span>ddddddddddddddddddd</span>
    <router-view class="main"></router-view>
    <router-view class="left" name="userInfo"></router-view>
    <router-view class="right" name="changePaw"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

路由中的meta

meta字段（元數據）
直接在路由配置的時候，給每個路由添加一個自定義的meta對象，在meta對象中可以設置一些狀態，來進行一些操作。用它來做登錄校驗再合適不過了

{
  path: '/actile', name: 'Actile', component: Actile, meta: { login_require: false }, }, { path: '/goodslist', name: 'goodslist', component: Goodslist, meta: { login_require: true }, children:[ { path: 'online', component: GoodslistOnline } ] } 

這里我們只需要判斷item下面的meta對象中的login_require是不是true，就可以做一些限制了

router.beforeEach((to, from, next) => { if (to.matched.some(function (item) { return item.meta.login_require })) { next('/login') } else next() })