vueRouter是基于vue的前端路由庫(kù)（設(shè)計(jì)成了 vue的插件）
讓前端實(shí)現(xiàn)SPA（single page application）單頁(yè)面應(yīng)用

spa優(yōu)點(diǎn)：切換速度快 （加載速度快）

缺點(diǎn)： 前端渲染 （nuxt 解決seo問(wèn)題）
seo 搜索引擎優(yōu)化 爬蟲(chóng)
不利于seo

npm 安裝:

cnpm i vue-router

模塊化工程中使用

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

頁(yè)面首先會(huì)加載,全局唯一一個(gè)html

引入

<script src="vue.js">
后面引入vue-router
<script src="vue-router.js">

定義 路由組件

    const Home = {
      template:`
        <div>
          <h1>home頁(yè)</h1>
        </div>
      `
    }
    const News = {
      template:`
        <div>
          <h1>新聞頁(yè)</h1>
        </div>
      `
    }

創(chuàng)建路由對(duì)象,

routes規(guī)則在外部定義,有哪些路由,路由對(duì)應(yīng)的組件是什么

    const routes = [ // 路由規(guī)則
      {
        path: '/home',
        component: Home
      },
      {
        path: '/news',
        component: News
      }
    ]
    // 創(chuàng)建路由對(duì)象
    const router = new VueRouter({
      routes
    })

在實(shí)例上增加router屬性

    const vm = new Vue({
      el:"xxx",
      router
    })

在模板上 需要 新增出口（占位）

在路由匹配到某個(gè)組件時(shí)，組件在router-view位置渲染

<router-view /> 

router-link組件做路由跳轉(zhuǎn)

to定義跳轉(zhuǎn)path,tag定義渲染的標(biāo)簽

在匹配的router-link中會(huì)自定加入 router-link-active 高亮類(lèi)

<router-link to="/home" tag="button"></router-link>

解決 /路由默認(rèn)顯示 某個(gè)組件問(wèn)題

1,新增路由規(guī)則

  {
    path: '/',
    component: Home
  }

2，重定向 推薦

當(dāng)用戶(hù)訪問(wèn) /a時(shí)，URL 將會(huì)被替換成 /b，然后匹配路由為 /b

 可以使home router-link 高亮
  {
    path: '/',
    redirect: '/home' // 當(dāng)?shù)刂窞?/ 會(huì)自動(dòng)變成/home
  }

動(dòng)態(tài)路由

當(dāng)vue-router引入時(shí)，

如果是直接script src引入的話(huà)，

自動(dòng)往構(gòu)造函數(shù)以及原型中添加一個(gè)屬性$route保存了當(dāng)前路由的基礎(chǔ)信息,

所有組件就可以直接通過(guò) this.$route獲取當(dāng)前路由基礎(chǔ)信息

定義動(dòng)態(tài)路由：

  routes = [
    {
      path:"/detail/:id", //定義一個(gè)動(dòng)態(tài)路由 定義了一個(gè)變量是id
      component: Detail
    }
  ]

跳轉(zhuǎn):

此時(shí) 2 是 動(dòng)態(tài)路由定義的 變量id 的值

  router-link to="/detail/2" 

獲?。簍his.$route.params.定義變量名,獲取動(dòng)態(tài)路由傳的參數(shù)

// path 
{
  path:"/a/:b/c/:d"
}
跳轉(zhuǎn)路徑：  /a/b/c/d
            /a/2/3/e 路徑是錯(cuò)誤的
結(jié)果：
  this.$route.params
        {
          b:"b",
          d:"d"
        }

動(dòng)態(tài)路由監(jiān)聽(tīng)路由參數(shù)(動(dòng)態(tài)路由傳的動(dòng)態(tài)的值)的變化

 watch:{
        "$route"(to, from){ // to去哪 from 從哪來(lái)
          console.log('變化了')
          console.log(to,from)
        }
      }

解決404

{
  path:"*", // *匹配任意路由  盡量將404頁(yè)面 路由規(guī)則放到最后
  component: NoutFound
}

嵌套路由

一級(jí)路由中 在路由組件中 還可以顯示 （根據(jù)路由的變化 父級(jí)組件）顯示不同子級(jí)的組件

  const routes = [
    {
      path: '/news',
      component: News,
      children: [ // 在父級(jí)路由規(guī)則中新增 children，在屬性中定義二級(jí)路由
        {
          path: '/news/native', // 建議二級(jí)路由path 攜帶一級(jí)路由的path作為前綴
          component: Native
        },
        {
          path:"/news/abroad",
          component: Abroad
        }
      ],
    }
  ]

  // 在一級(jí)路由 對(duì)于的 組件中 新增router-view 作為二級(jí)路由 出口（占位）
  const News = {
    template:` 
      <div>
        <h1>news組件</h1>
        <router-view/> 
      </div>
    ` 
  }

  <route-view />

命名路由

給每個(gè)路由規(guī)則新增name屬性，相當(dāng)于給每個(gè)路由起個(gè)名字

routes = [
  {
    path:'/home',
    name:'首頁(yè)', //給這個(gè)路由新增name屬性
    component:xxx
  }
]

編程式導(dǎo)航

聲明式導(dǎo)航:利用組件跳轉(zhuǎn)路由（router-link）

編程式導(dǎo)航:js內(nèi)部通過(guò)方法來(lái)控制路由跳轉(zhuǎn)

跳轉(zhuǎn)路由的參數(shù)同router-link的to屬性
跳轉(zhuǎn)路由 并往歷史記錄中添加一條新的記錄

this.$router.push() 

跳轉(zhuǎn)路由 參數(shù)同router-link 的to 屬性

跳轉(zhuǎn)路由，不添加新記錄 而是 覆蓋當(dāng)前的記錄

this.$router.replace() 

跳轉(zhuǎn)路由

this.$router.go(n)
            0  //刷新
            -1  //回退一步
            1 // 前進(jìn)一步
            n // 前進(jìn)n步

別名

/a 的別名是 /b，意味著，當(dāng)用戶(hù)訪問(wèn) /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶(hù)訪問(wèn) /a 一樣。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

路由組件傳參

• 動(dòng)態(tài)路由傳參

{
  path:"/news/:id"
  component:News
}
// 跳轉(zhuǎn)時(shí)
<router-link to="/news/2">
// 獲取
this.$route.params.id

• params傳參

1，直接寫(xiě)字符串這種情況必須寫(xiě)path

router-link to="/news" 
this.$router.push("/news")

2，參數(shù)可以是對(duì)象

router-link :to="{name:'home'}" 可以以名字跳轉(zhuǎn)

params傳參

1，聲明式導(dǎo)航

<router-link :to="{name:'news',params:{a:10,b:20}}">

2，編程式導(dǎo)航

this.$router.push({name:'news',params:{a:10,b:20}})

獲?。?/p>

  this.$route.params.xxx

注意：
params傳參 必須結(jié)合命名路由一起使用

跳轉(zhuǎn)時(shí)，必須要通過(guò)name跳轉(zhuǎn)，否則傳不過(guò)去

params傳參的優(yōu)點(diǎn)：隱式傳參 地址欄看不見(jiàn)

缺點(diǎn)：刷新后數(shù)據(jù)會(huì)丟失

• query傳參

router-link
      :to="{path:'/news',query:{a:10,b:20}}"

this.$router.push({
  path:'/news',
  query:{
    a:10,
    b:20
  }
})

獲取

this.$route.query.xxx

優(yōu)點(diǎn)：刷新后 數(shù)據(jù)不丟失
缺點(diǎn)：參數(shù)放在地址欄上
query最好結(jié)合path 盡量不結(jié)合name

路由模式

1,hash模式

原理：利用瀏覽器的url 的hash值得變化（url加hash值 #/home）

利用 window.onhashchange 當(dāng)?shù)刂窓诘膆ash值改變時(shí)觸發(fā)

優(yōu)勢(shì):地址欄的 路徑指向不會(huì)改變

缺點(diǎn)：丑

2，history模式

/home #/news 變成 xxx/home xxx/news

原理：h5新增的api history pushState方法和replaceState()方法

優(yōu)點(diǎn)：好看 沒(méi)有#

缺點(diǎn)：/寫(xiě)在最前面 代表根路徑，在本地和瀏覽器運(yùn)行不一樣

導(dǎo)航守衛(wèi) 、 導(dǎo)航鉤子函數(shù)

監(jiān)聽(tīng)甚至攔截路由變化

• 全局守衛(wèi) （攔截所有的路由）

// 全局前置 守衛(wèi)
router.beforeEach((to,from,next)=>{
  // to 目標(biāo)路由 
  // from 從哪來(lái)路由
  // next 攔截器 不調(diào)用next()路由無(wú)法進(jìn)入,next參數(shù)同router-link to屬性的值，重定向地址
  next()
})

• 路由獨(dú)享的 （定義在路由規(guī)則中，只攔截這個(gè)路由）
• 組件內(nèi)部