1、路由配置

路由組件

路由組件就是一個(gè)普通組件，只不過不需要使用全局或者局部注冊。在路由配置中綁定對應(yīng)的路由組件即可

const page = {
  template: `
    <div></div>
  `
}


const routes = [
  {
    path: '/',
    component: page // 一旦頁面路由匹配了 / 那么vue就會把page渲染到頁面的router-view中
  }
]

路由配置

路由配置是一個(gè)數(shù)組

const routes = [
  // 多個(gè)路由配置對象
  {
    path: '/a/b/c/d/e', // 表示對應(yīng)的路由路徑
    component: 組件名,
    children: [
      // chilren中包含的也是路由配置對象，只不過他的組件會渲染到其父路由的組件中的router-view
      {
        path: 'f', // path不需要寫 / 路由會和父路由進(jìn)行拼接  /a/b/c/d/e/f
      }
    ]
  }, {
    path: '/a/b/c/d/e/f', // 這個(gè)和上面的情況不一樣，他的組件會被渲染到app的router-view中
    component: 組件名
  }
]

創(chuàng)建router對象

router對象是new VueRouter得到的

const router = new VueRouter({
  routes,
  linkActiveClass: '新的類名',
  linkExactActiveClass: '精確的新的類名'
})

在new Vue中配置router

const app = new Vue({
  el: '#app',
  router // 一旦將router加入到這個(gè)位置，那么this中就會多兩個(gè)東西，this.$route this.$router
})

router-link

router-link默認(rèn)會被渲染成a標(biāo)簽

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

<!-- 修改單獨(dú)的router-link激活類名 -->
<router-link active-class="類名"></router-link>

<!-- 修改單獨(dú)的router-link精確激活類名 -->
<router-link exact-active-class="類名"></router-link>

<!-- 把a(bǔ)ctive-class變成精確的class -->
<router-link exact></router-link>

<!-- 可以將router-link渲染成其他標(biāo)簽 -->
<router-link tag="標(biāo)簽名"></router-link>

<!-- 修改跳轉(zhuǎn)方式的事件，默認(rèn)是點(diǎn)擊跳轉(zhuǎn) -->
<router-link event="click"></router-link>
<router-link :event="['click', 'mouseenter']"></router-link>

2、路由參數(shù)

路由參數(shù)分類

query

http://localhost:3000/#/?key=value&key2=value
  query

this.$route.query.key
this.$route.query.key2

router-link怎么聲明

<router-link to="/?key=value"></router-link>
<router-link :to="'/?key=' + value"></router-link>
<router-link :to="{path: '路徑', query: {key: value}}"></router-link>
<router-link :to="{name: '路由名字', query: {key: value}}"></router-link>

params

注意 想要有params參數(shù)必須配置動(dòng)態(tài)路由，動(dòng)態(tài)路由的變量，就是params的屬性

const routes = [
  {
    path: '/:id'
  }
]

<div>{{$route.params.id}}</div>

router-link怎么聲明

<router-link to="/value"></router-link>
<router-link :to="'/' + value"></router-link>
<!-- 下面寫法需要給路由添加name屬性才能完成 -->
<router-link :to="{name: '路由名字', params: {id: value}}"></router-link>

3、全局前置守衛(wèi)

const router = new VueRouter()

router.beforeEach((to, from, next) => {
  // 判斷某些路由是否需要登錄才能訪問
  if (to.matched.some(route => route.meta.自定義屬性名)) {
    // 驗(yàn)證token是否可以使用
    if (驗(yàn)證token) {
      next() // 正常跳轉(zhuǎn)
    } else {
      next({path: '/login', query: {url: to.path}}) // 跳轉(zhuǎn)到登錄頁面后，會攜帶對應(yīng)的url參數(shù) 這個(gè)url就是登錄成功后要跳轉(zhuǎn)的path
    }
  } else {
    next()
  }
})

export default {
  methods: {
    login () {
      // 獲取用戶名密碼，用用戶名密碼請求登錄接口
      如果請求成功，則將對應(yīng)的token存儲起來
      
      繼續(xù)跳轉(zhuǎn)到對應(yīng)的頁面

      const url = this.$route.query.url ||  '/'
      this.$router.replace(url)
    }
  }
}

4、 編程式導(dǎo)航

• 聲明式導(dǎo)航
• 編程式導(dǎo)航

導(dǎo)航方式

編程式導(dǎo)航利用了router，這個(gè)router就是new VueRouter()。有些地方?jīng)]法直接獲取到router，需要使用this.$router

// 直接寫path
this.$router.push('path')
// 直接寫name
this.$router.push('name')
// 寫成對象形式
this.$router.push({path: 'path'})
this.$router.push({name: 'name'})

// 攜帶query參數(shù)
this.$router.push({path: 'path', query: {key: "value"}})
this.$router.push({name: 'name', query: {key: "value"}})

// 攜帶params參數(shù)
this.$router.push({name: 'name', params: {key: "value"}})
// push的作用就是去跳轉(zhuǎn)頁面，并且會在歷史記錄里新增新的歷史記錄

/* 
  this.$router.replace()
    括號中的寫法和push一致，replace會將新的頁面替換當(dāng)前歷史記錄中的頁面

  this.$router.go() 去對應(yīng)的歷史記錄中
  this.$router.forward() 歷史記錄前進(jìn)
  this.$router.back() 歷史記錄后退
*/

5、 攔截器

請求攔截器

攔截請求，然后查詢是否有token，如果有則添加到請求頭（這樣所有的請求就都有token），如果沒有則不添加

// 添加一個(gè)請求攔截器
axios.interceptors.request.use((config) => {
  // 獲取localStorage中的token如果有則添加，如果沒有則不添加
  const token = localStorage.getItem('token')
  token ? config.headers.common['Authorization'] = "Bearer " + token : null
  return config
}, (err) => {
  return Promise.reject(err)
})

響應(yīng)攔截器

攔截響應(yīng)結(jié)果，如果為401，則跳轉(zhuǎn)到登錄，router在axios.js不存在，需要我們手動(dòng)引入

// 添加一個(gè)響應(yīng)攔截器
axios.interceptors.response.use((res) => {
  if (res.data.res_code === 401) {
    // 跳轉(zhuǎn)到登錄頁
    router.push('/login')
  }
  // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
  return res;
}, (error) => {
  // 對響應(yīng)錯(cuò)誤做點(diǎn)什么
  return Promise.reject(error);
});

token哪來的

token是在登錄操作中獲取到的，獲取到token后，將其存儲在storage里供以后使用

token在使用時(shí)需要加到header，并不是所有的都需要加Bearer前綴