VUE三 vue-router（路由）詳解

前端路由javascript

根據不一樣的 url 地址展現不一樣的內容或頁面，無需依賴服務器根據不一樣URL進行頁面展現操做前端

優勢vue

用戶體驗好，不須要每次都從服務器所有獲取，快速展示給用戶

缺點java

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

1、路由（以user爲例）jquery

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

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）vue-router

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

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


<style scoped>

</style>

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

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

2、動態路由匹配瀏覽器

模式	匹配路徑	獲取動態路由參數
/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顯示在頁面上。

3、嵌套路由

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

以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組件渲染出來頁面上，有兩個導航（用戶基本信息頁、用戶修改密碼頁）能夠來回切換

4、編程式路由

經過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

5、命名路由和命名視圖

給路由定義不一樣的名字，根據路由的名字進行匹配
給不一樣的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() })