Vue-router

Vue-route

由於Vue在開發時對路由支持的不足，後來官方補充了vue-router插件，它在Vue的生態環境中非常重要，在實際開發中只要編寫一個頁面就會操作vue-router。要學習vue-router就要先知道這裏的路由是什麼？這裏的路由並不是指我們平時所說的硬件路由器，這裏的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是我們WebApp的鏈接路徑管理系統。

有的小夥伴會有疑慮，爲什麼我們不能像原來一樣直接用<a></a>標籤編寫鏈接哪？因爲我們用Vue作的都是單頁應用，就相當於只有一個主的index.html頁面，所以你寫的<a></a>標籤是不起作用的，你必須使用vue-router來進行管理。

Vue-router入門

安裝vue-router

npm install vue-router --save-dev

如果你安裝很慢，也可以用cnpm進行安裝，如果你在使用vue-cli中已經選擇安裝了vue-router，那這裏不需要重複安裝了。

解讀router/index.js文件

我們用vue-cli生產了我們的項目結構，你可以在src/router/index.js文件，這個文件就是路由的核心文件，我們先解讀一下它。

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目錄下的Hello.vue組件
Vue.use(Router)  //Vue全局使用Router
export default new Router({
  routes: [              //配置路由，這裏是個數組
    {                    //每一個鏈接都是一個對象
      path: '/',         //鏈接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對應的組件模板
    }
  ]
})

項目中

import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '../store'

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'HousingFund',
            meta: {
                requireLogin: true
            },
            component: resolve => require(['@/page/housing-fund/Index.vue'], resolve)
        },
        {
            path: '/hf/detail',
            name: 'HousingFundDetail',
            meta: {
                requireLogin: true
            },
            component: resolve => require(['@/page/housing-fund/Detail.vue'], resolve)
        }
    ]
})

router.beforeEach(function(to, from, next) {
    const baseUrl = ''
    // 從url中獲取token，用於判斷是否已登錄
    const token = getUrlParam('token')
    if (token) {
        store.commit('SET_TOKEN', token)
    }
    // 判斷該路由是否需要實名認證
    if (to.meta.requireAuth) {
        if (token) {
            // 獲取用戶信息，判斷是否已實名認證
            store.dispatch('getUser', token).then(response => {
                const isAuth = response
                if (isAuth) {
                    next()
                } else {
                    // 調用認證登錄+實名認證功能
                    location.href = 'http://h5test.cqliving.com/auth2.html?code=hwjr2spfcjwzrxvphql51c3i85zo4d8x&redirect_url=' + 
                    baseUrl + to.fullPath
                }
            })            
        } else {
            // 調用認證登錄+實名認證功能
            location.href = 'http://h5test.cqliving.com/auth2.html?code=hwjr2spfcjwzrxvphql51c3i85zo4d8x&redirect_url=' + 
            baseUrl + to.fullPath
        }
    } else if (to.meta.requireLogin) {
        if (token) {
            next()
        } else {
            // 調用認證登錄功能
            location.href = 'http://h5test.cqliving.com/auth2.html?code=7793vjwr91jwttcugo2yf2ad6mqxicyt&redirect_url=' + 
            baseUrl + to.fullPath
        }
    } else {
        next()
    }
})

export function getUrlParam (name) {
   return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
}

export default router;

增加一個Hi的路由和頁面

對路由的核心文件熟悉後，我們試着增加一個路由配置，我們希望在地址欄輸入 http://localhost:8080/#/hi 的時候出現一個新的頁面，先來看一下我們希望得到的效果。

在src/components目錄下，新建 Hi.vue 文件。
編寫文件內容，和我們之前講過的一樣，文件要包括三個部分<template><script>和<style>。文件很簡單，只是打印一句話。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi,vue'
    }
  }
}
</script>
<style scoped>
</style>

引入 Hi組件：我們在router/index.js文件的上邊引入Hi組件

import Hi from '@/components/Hi'

增加路由配置：在router/index.js文件的routes[]數組中，新增加一個對象，代碼如下。

{
path:'/hi',
name:'Hi',
component:Hi
}

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目錄下的Hello.vue組件
import Hi from '@/components/Hi' 
Vue.use(Router)  //Vue全局使用Router
export default new Router({
  routes: [              //配置路由，這裏是個數組
    {                    //每一個鏈接都是一個對象
      path: '/',         //鏈接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對應的組件模板
    },{
      path:'/hi',
      name:'Hi',
      component:Hi
    }
  ]
})

router-link製作導航

現在通過在地址欄改變字符串地址，已經可以實現頁面內容的變化了。這並不滿足需求，我們需要的是在頁面上有個像樣的導航鏈接，我們只要點擊就可以實現頁面內容的變化。製作鏈接需要標籤，我們先來看一下它的語法。

<router-link to="/">[顯示字段]</router-link>

to：是我們的導航路徑，要填寫的是你在router/index.js文件裏配置的path值，如果要導航到默認首頁，只需要寫成 to=”/” ，
[顯示字段] ：就是我們要顯示給用戶的導航名稱，比如首頁新聞頁。

明白了router-link的基本語法，我們在 src/App.vue文件中的template里加入下面代碼，實現導航。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <p>導航 ：
      <router-link to="/">首頁</router-link>
      <router-link to="/hi">Hi頁面</router-link>
    </p>
  </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>

vue-router配置子路由

改造App.vue的導航代碼,我們需要先改造app.vue的導航代碼，來實現基本的導航功能。我們用標籤增加了兩個新的導航鏈接。

App.vue代碼

<p>導航 ：
      <router-link to="/">首頁</router-link> | 
      <router-link to="/hi">Hi頁面</router-link> |
      <router-link to="/hi/hi1">-Hi頁面1</router-link> |
      <router-link to="/hi/hi2">-Hi頁面2</router-link>
</p>

改寫components/Hi.vue頁面

把Hi.vue改成一個通用的模板，加入<router-view>標籤，給子模板提供插入位置。“Hi頁面1” 和 “Hi頁面2” 都相當於“Hi頁面”的子頁面，有點想繼承關係。我們在“Hi頁面”里加入<router-view>標籤。

在components目錄下新建兩個組件模板 Hi1.vue 和 Hi2.vue

新建的模板和Hi.vue沒有太多的差別，只是改變了data中message的值，也就是輸出的結果不太一樣了。 Hi1.vue ···

修改router/index.js代碼我們現在導航有了，母模板和子模板也有了，只要改變我們的路由配置文件就可以了。子路由的寫法是在原有的路由配置下加入children字段。

children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]

children字段後邊跟的是個數組，數組裏和其他配置路由基本相同，需要配置path和component。具體看一下這個子路由的配置寫法。

import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import Hi from '@/components/Hi' 
import Hi1 from '@/components/Hi1' 
import Hi2 from '@/components/Hi2' 
Vue.use(Router) 
export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})

需要注意的是，在配置路由文件前，需要先用import引入Hi1和Hi2。

總結：這節課學的內容在路由配置裏經常用到，比如我們作一個購物模塊，購物模塊裏有很多相同的元素，我們就會利用這種子路由的形式，先定一個父頁面，然後再修改子頁面。希望這節課對你有幫助，其實子路由的步驟還是有些繁瑣的，所以希望你們多練習幾遍，能夠完全掌握。

vue-router如何參數傳遞

開發中，參數的傳遞是個最基本的業務需求。通過URL地址來傳遞參數是一個形式，這節課我們就看看vue-router爲我們提供了那些傳遞參數的功能。我們先想象一個基本需求，就是在我們點擊導航菜單時，跳轉頁面上能顯示出當前頁面的路徑，來告訴用戶你想在所看的頁面位置（類似於麪包屑導航）

用name傳遞參數

在路由文件src/router/index.js裏配置name屬性。

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

模板裏(src/App.vue)用$route.name的形勢接收，比如直接在模板中顯示：

<p>{{ $route.name}}</p>

通過標籤中的to傳參

也許你也會覺的上邊的傳參很不正規，也不方便，其實我們多數傳參是不用name進行傳參的，我們用標籤中的to屬性進行傳參，需要您注意的是這裏的to要進行一個綁定，寫成:to。先來看一下這種傳參方法的基本語法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

這裏的to前邊是帶冒號的，然後後邊跟的是一個對象形勢的字符串.

name：就是我們在路由配置文件中起的name值。
params：就是我們要傳的參數，它也是對象形勢，在對象裏可以傳遞多個值。

瞭解基本的語法後，我們改造一下我們的src/App.vue裏的標籤,我們把hi1頁面的進行修改。

<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi頁面1</router-link>

把src/reouter/index.js文件裏給hi1配置的路由起個name,就叫hi1.

{path:'/hi1',name:'hi1',component:Hi1},

最後在模板裏(src/components/Hi1.vue)用$route.params.username進行接收.

{{$route.params.username}}

總結：今天我們學習了兩種傳參的方法，一般會使用第二種方法。我們通過學習也知道了name的用途，一種作用是傳參，一種作用是在傳參時起到名稱作用。

vue-router 利用url傳遞參數

**:**冒號的形式傳遞參數我們可以在理由配置文件裏以:冒號的形式傳遞參數，這就是對參數的綁定。 -. 在配置文件裏以冒號的形式設置參數。我們在/src/router/index.js文件裏配置路由。

{
    path:'/params/:newsId/:newsTitle',
    component:Params
}

我們需要傳遞參數是新聞ID（newsId）和新聞標題（newsTitle）.所以我們在路由配置文件裏制定了這兩個值。

在src/components目錄下建立我們params.vue組件，也可以說是頁面。我們在頁面裏輸出了url傳遞的的新聞ID和新聞標題。

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新聞ID：{{ $route.params.newsId}}</p>
        <p>新聞標題：{{ $route.params.newsTitle}}</p>
    </div>
</template>
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

在App.vue文件里加入我們的標籤。這時候我們可以直接利用url傳值了。

<router-link to="/params/198/jspang website is very good">params</router-link> |

我們已經實現了以url方式進行傳值，這在實際開發中經常使用，必須完全瞭解。我希望你看完視頻後或者學完文章後能多練習兩邊，並在實際項目中充分使用。

正則表達式在URL傳值中的應用

上邊的例子，我們傳遞了新聞編號，現在需求升級了，我們希望我們傳遞的新聞ID只能是數字的形式，這時候我們就需要在傳遞時有個基本的類型判斷，vue是支持正則的。

加入正則需要在路由配置文件裏（/src/router/index.js）以圓括號的形式加入。

path:'/params/:newsId(\\d+)/:newsTitle',

vue-router 的重定向-redirect

redirect基本重定向

我們只要在路由配置文件中（/src/router/index.js）把原來的component換成redirect參數就可以了。我們來看一個簡單的配置。

export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params
    },{
      path:'/goback',
      redirect:'/'
    }
  ]
})

這裏我們設置了goback路由，但是它並沒有配置任何component（組件），而是直接redirect到path:’/’下了，這就是一個簡單的重新定向。

重定向時傳遞參數

我們已經學會了通過url來傳遞參數，那我們重定向時如果也需要傳遞參數怎麼辦？其實vue也已經爲我們設置好了，我們只需要在ridirect後邊的參數裏複製重定向路徑的path參數就可以了。可能你看的有點暈，我們來看一段代碼：

{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}

alias別名的使用

上節學習了路由的重定向，我相信大家已經可以熟練使用redirect進行重定向了。使用alias別名的形式，我們也可以實現類似重定向的效果。

首先我們在路由配置文件裏（/src/router/index.js），給上節課的Home路徑起一個別名，jspang。

{
    path: '/hi1',
    component: Hi1,
    alias:'/jspang'
 }

配置我們的，起過別名之後，可以直接使用<router-link>標籤裏的to屬性，進行重新定向。

<router-link < to="/jspang">jspang</router-link>

redirect和alias的區別

redirect：仔細觀察URL，redirect是直接改變了url的值，把url變成了真實的path路徑。

alias：URL路徑沒有別改變，這種情況更友好，讓用戶知道自己訪問的路徑，只是改變了<router-view>中的內容。

別名請不要用在path爲’/’中，如下代碼的別名是不起作用的。

路由的過渡動畫

想讓路由有過渡動畫，需要在<router-view>標籤的外部添加<transition>標籤，標籤還需要一個name屬性。

<transition name="fade">
  <router-view ></router-view>
</transition>

我們在/src/App.vue文件裏添加了<transition>標籤，並給標籤起了一個名字叫fade。

css過渡類名：組件過渡過程中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，比如name=”fade”,會有如下四個CSS類名：

fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀後立刻刪除。
fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成後移除。
fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀後立刻刪除。
fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成後被刪除。

那我們就在App.vue頁面里加入四種CSS樣式效果，並利用CSS3的transition屬性控制動畫的具體效果。代碼如下：

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

上邊的代碼設置了改變透明度的動畫過渡效果，但是默認的mode模式in-out模式，這並不是我們想要的。下面我們學一下mode模式。

過渡模式mode：

in-out:新元素先進入過渡，完成之後當前元素過渡離開。
out-in:當前元素先進行過渡離開，離開完成後新元素過渡進入。

mode的設置和404頁面的處理

在學習過渡效果的時候，我們學了mode的設置，但是在路由的屬性中還有一個mode。這節課我們就學習一下另一個mode模式和404頁面的設置。

mode的兩個值

histroy:當你使用 history 模式時，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！

hash:默認’hash’值，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網址瀏覽習慣。

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

404頁面的設置：

用戶會經常輸錯頁面，當用戶輸錯頁面時，我們希望給他一個友好的提示，爲此美工都會設計一個漂亮的頁面，這個頁面就是我們常說的404頁面。vue-router也爲我們提供了這樣的機制.

設置我們的路由配置文件（/src/router/index.js）：

{
   path:'*',
   component:Error
}

這裏的path:’*’就是找不到頁面時的配置，component是我們新建的一個Error.vue的文件。

.新建404頁面：

在/src/components/文件夾下新建一個Error.vue的文件。簡單輸入一些有關錯誤頁面的內容。

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

路由中的鉤子

我們知道一個組件從進入到銷燬有很多的鉤子函數，同樣在路由中也設置了鉤子函數。路由的鉤子選項可以寫在路由配置文件中，也可以寫在我們的組件模板中。我們這節課就介紹這兩種鉤子函數的寫法。

路由配置文件中的鉤子函數

{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('我進入了params模板');
        console.log(to);
        console.log(from);
        next();
},

我們在params路由裏配置了bdforeEnter得鉤子函數，函數我們採用了ES6的箭頭函數，需要傳遞三個參數。我們並在箭頭函數中打印了to和from函數。

to:路由將要跳轉的路徑信息，信息是包含在對像裏邊的。

from:路徑跳轉前的路徑信息，也是一個對象的形式。

next:路由的控制參數，常用的有next(true)和next(false)

寫在模板中的鉤子函數在配置文件中的鉤子函數，只有一個鉤子-beforeEnter，如果我們寫在模板中就可以有兩個鉤子函數可以使用：

beforeRouteEnter：在路由進入前的鉤子函數。
beforeRouteLeave：在路由離開前的鉤子函數。

export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("準備進入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("準備離開路由模板");
    next();
  }
}
</script>

這是我們寫在params.vue模板裏的路由鉤子函數。它可以監控到路由的進入和路由的離開，也可以輕易的讀出to和from的值。

編程式導航

this.$router.go(-1) 和 this.$router.go(1)

這兩個編程式導航的意思是後退和前進，功能跟我們瀏覽器上的後退和前進按鈕一樣，這在業務邏輯中經常用到。比如條件不滿足時，我們需要後退。

router.go(-1)代表着後退，我們可以讓我們的導航進行後退，並且我們的地址欄也是有所變化的。

我們先在app.vue文件里加入一個按鈕，按鈕並綁定一個goback( )方法。

<button @click="goback">後退</button>

在我們的script模塊中寫入goback()方法，並使用this.$router.go(-1),進行後退操作。

<script>
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
}
</script>

router.go(1):代表着前進，用法和後退一樣.

this.$router.push(‘/xxx‘)

在<script>模塊里加入goHome方法，並用this.$router.push(‘/’)導航到首頁

export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
}

Vue-route

Vue-router入門

解讀router/index.js文件

增加一個Hi的路由和頁面

router-link製作導航

vue-router配置子路由

vue-router如何參數傳遞

vue-router 利用url傳遞參數

正則表達式在URL傳值中的應用

vue-router 的重定向-redirect

alias別名的使用

路由的過渡動畫

mode的設置和404頁面的處理

路由中的鉤子

編程式導航

定時的實現方式之一，excel入庫

阿里巴巴Java開發規約

python其實很簡單

axios

Java虛擬機-第二篇-垃圾收集器

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結