初衷

最近想嘗試一下vue框架的使用，但是沒有足夠的時(shí)候一點(diǎn)點(diǎn)去看它的具體使用，就找了一個(gè)實(shí)戰(zhàn)的網(wǎng)課看了一下，主要是vue2+vant，并跟著做了一遍，vue和angular相似的地方還是比較多的，具體的使用我也不打算記錄了，簡(jiǎn)單的記錄一下vue-router的配置吧~（主要是肉體可知的記憶力在下降，不得不進(jìn)行爛筆頭行動(dòng)??）

vue-router的安裝

npm install vue-router --save-dev

項(xiàng)目結(jié)構(gòu)目錄中路由文件的介紹

image

image

使用<router-link>標(biāo)簽來(lái)制作導(dǎo)航

<template>
  <div id="app">
    // 模板插入位置
    <router-view/>
  </div>
</template>

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

<style>
#app {
  background-color: #fefefe;
}
</style>

// 1.像普通a標(biāo)簽一樣進(jìn)行路由的跳轉(zhuǎn)
  <p>導(dǎo)航 ：
   <router-link to="/">首頁(yè)</router-link>
   <router-link to="/register">注冊(cè)頁(yè)面</router-link>
  </p>

// 2.業(yè)務(wù)邏輯代碼中，可以通過(guò)使用編程式路由進(jìn)行跳轉(zhuǎn)
    this.$router.push('/register')

vue-router配置子路由

使用場(chǎng)景

其實(shí)在日常開發(fā)中配置子路由是很常見的一種情況，當(dāng)某個(gè)頁(yè)面隸屬于某個(gè)模板的時(shí)候我們就需要配置子路由了~
以我最近實(shí)戰(zhàn)的項(xiàng)目為例子，我希望在首頁(yè)上有個(gè)可以切換不同內(nèi)容的footer組件，這些切換的內(nèi)容就是作為首頁(yè)的子路由，

image

我們來(lái)看一下相關(guān)代碼的配置：

import Vue from 'vue'
import Router from 'vue-router'
import ShoppingMall from '@/components/pages/ShoppingMall' // @符號(hào)就是表示src
import  Register from '@/components/pages/Register'
import Login from '@/components/pages/Login'
import Goods from '@/components/pages/Goods'
import CategoryList from '@/components/pages/CategoryList'
import Cart from '@/components/pages/Cart'
import Member from '@/components/pages/Member'
import Main from '@/components/pages/Main'

Vue.use(Router)

export default new Router({
routes: [
  {
    path: '/',
    name: 'Main',
    component: Main,
    // 這里的子路由會(huì)加載到父組件main的router插槽中
    children: [            //children組件就是專門來(lái)配置子路由的啦
      {
        path: '/',
        name: 'ShoppingMall',
        component: ShoppingMall
      },
      {
        path: '/categoryList',
        name: 'CategoryList',
        component: CategoryList
      },
      {
        path: '/cart',
        name: 'Cart',
        component: Cart
      },
      {
        path: '/member',
        name: 'Member',
        component: Member
      }
    ]
  },
  // 這里的路由會(huì)加載到app中的router插槽中
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/goods',
    name: 'Goods',
    component: Goods
  },
]
})

vue-router的參數(shù)傳遞

參數(shù)傳遞同樣是一個(gè)很基本的業(yè)務(wù)，日常開發(fā)中頁(yè)面的跳轉(zhuǎn)，通過(guò)Url傳參，大家在實(shí)際使用中也是經(jīng)常碰到的吧~ 我們來(lái)看看vue提供幾種路由傳參的形式~

通過(guò)name傳遞參數(shù)

1.路由配置
routes: [
  {
    path: '/',
    name: 'Register',   // 配置name屬性
    component: Register
  }
]

2.頁(yè)面獲取
<p>{{ $route.name }}</p> // 通過(guò)$route.name進(jìn)行接收

通過(guò)<router-link>標(biāo)簽中的to傳參

其實(shí)我們多數(shù)傳參是不用name進(jìn)行傳參的，我們用<router-link>標(biāo)簽中的to屬性進(jìn)行傳參，需要注意的是這里的to要進(jìn)行一個(gè)綁定，寫成:to

1.標(biāo)簽上直接設(shè)置
<router-link :to="{name:'Register',params:{key:value}}">value</router-link>

2.頁(yè)面獲取
<p>{{$route.params.username}}</p> // 在使用的模板中接收

name：就是我們?cè)诼酚膳渲梦募衅鸬膎ame值。
params：就是我們要傳的參數(shù)，它也是對(duì)象形勢(shì)，在對(duì)象里可以傳遞多個(gè)值。

通過(guò)url進(jìn)行傳參

:冒號(hào)的形式傳遞參數(shù)

1. 路徑上設(shè)置
 {
   path:'/params/:newsId/:newsTitle',
   component:Params
 }

2.頁(yè)面上傳入相關(guān)參數(shù)
<router-link to="/params/168/set params">params</router-link>

3.頁(yè)面獲取
<template>
  <div>
      <h2>{{ msg }}</h2>
      <p>新聞ID：{{ $route.params.newsId}}</p>
      <p>新聞標(biāo)題：{{ $route.params.newsTitle}}</p>
  </div>
</template>

編程式導(dǎo)航的params進(jìn)行參數(shù)的傳遞

1. 在函數(shù)中傳入?yún)?shù)（2種形式）
  1.1 this.$router.push({name: 'Goods', params:{goodsId: id}}) //使用name就得用戶編程式導(dǎo)航的params進(jìn)行參數(shù)的傳遞
  1.2 this.$router.push({path:'/Goods', query: {goodsId: this.goodsId}}) // 如果使用的時(shí)候path: /goods則使用的就是query 


2.接收的地方(一般是在created生命周期函數(shù)里，根據(jù)傳入的形式不同，獲取也是不同的)
this.goodsId = this.$route.query.goodsId ?  this.$route.query.goodsId :  this.$route.params.goodsId

單頁(yè)面多路由區(qū)域的操作

這種就是在一個(gè)頁(yè)面上，有多個(gè)路由區(qū)域，我們直接通過(guò)截圖，看看相關(guān)代碼

image

路由的配置

image

vue-router的重定向

當(dāng)我們?cè)陂_發(fā)中，設(shè)置的路徑不一樣，卻希望跳轉(zhuǎn)的頁(yè)面是相同的，這個(gè)時(shí)候我們就需要使用路由重定向了

基本重定向

  //  只需要將原來(lái)的component換成redirect參數(shù)
  export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },{
      path:'/register',
      component:Register
    },{
      path:'/goback',  // 直接redirect到path:’/’路徑下
      redirect:'/'
    }

  ]
})

重定向時(shí)傳遞參數(shù)

// 只需要在redirect后邊的參數(shù)里復(fù)制重定向路徑的path參數(shù)就可以
export default new Router({
routes: [
      {
        path: '/',
        component: Hello
      },{
      // Vue的是支持在路徑中使用正則表達(dá)式的，我們只需要用()進(jìn)行包裹，這里就表示只能使用戶數(shù)字類型的Id
        path:'/params/:newsId(\\d+)',
        component:Params
      },{
        path:'/goParams/:newsId(\\d+)',
        redirect:'/params/:newsId(\\d+)'
      }
]
})

路由別名alias

使用alias別名的形式，我們也可以實(shí)現(xiàn)類似重定向的效果。

1. 配置
{
  path: '/menu',
  component: Menu,
  alias:'/list'   // 頁(yè)面顯示的路徑仍然是/list 但是UI加載是是menu組件
}

2.使用
 <router-link to="/list">jspang</router-link>

redirect和alias的區(qū)別

redirect：redirect是直接改變了用戶輸入的url的值，把url變成了真實(shí)指向的path路徑。
alias：用戶輸入的url路徑?jīng)]有被改變，這種情況更友好，讓用戶知道自己訪問(wèn)的路徑，只是改變了UI的內(nèi)容。

alias使用的注意事項(xiàng)

別名請(qǐng)不要用在path為'/'中,vue不支持這樣使用

路由的過(guò)渡動(dòng)畫效果

// 想讓路由有過(guò)渡動(dòng)畫，需要在<router-view>標(biāo)簽的外部添加<transition>標(biāo)簽，標(biāo)簽還需要一個(gè)name屬性
<transition name="fade">
  <router-view ></router-view>
</transition>

fade-enter: 進(jìn)入過(guò)渡的開始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立刻刪除。
fade-enter-active: 進(jìn)入過(guò)渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在過(guò)渡過(guò)程完成后移除。
fade-leave: 離開過(guò)渡的開始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立刻刪除。
fade-leave-active: 離開過(guò)渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，離開過(guò)渡完成后被刪除。

匹配404

{
 path:'*', // 表示找不到對(duì)應(yīng)路徑的時(shí)候 則加載Error頁(yè)面
 component:Error
}

路由鉤子

我們知道一個(gè)組件從進(jìn)入到銷毀有很多的鉤子函數(shù)，同樣在路由中也有鉤子函數(shù)。路由的鉤子選項(xiàng)可以寫在路由配置文件中，也可以寫在我們的組件模板中

1.當(dāng)寫在路由配置文件中
2.在路由文件中我們只能寫一個(gè)beforeEnter,就是在進(jìn)入此路由配置時(shí),先來(lái)看一段具體的代碼：

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

to: 路由將要跳轉(zhuǎn)的路徑信息，信息是包含在對(duì)像里邊的。
from: 路徑跳轉(zhuǎn)前的路徑信息，也是一個(gè)對(duì)象的形式。
next: 路由的控制參數(shù)，常用的有next(true)和next(false)。

// 在組件模板中使用
export default {
name: 'params',
data () {
  return {
    msg: 'params page'
  }
},
beforeRouteEnter:(to,from,next)=>{
  console.log("準(zhǔn)備進(jìn)入路由模板");
  next();
},
beforeRouteLeave: (to, from, next) => {
  console.log("準(zhǔn)備離開路由模板");
  next();
}
}
</script>

beforeRouteEnter：在路由進(jìn)入前的鉤子函數(shù)。
beforeRouteLeave：在路由離開前的鉤子函數(shù)。

總結(jié)

大概就記錄這些吧~ 用到的時(shí)候就翻過(guò)來(lái)看看???♀? 之前專注力不好的時(shí)候，我感覺記錄是最能讓我聚精會(huì)神的，但是今天還是走神了~ 如有出錯(cuò)，還請(qǐng)指出??