首先需要在項(xiàng)目中引入vue-router，一種方式是在創(chuàng)建項(xiàng)目，配置項(xiàng)目時(shí)選擇使用vue-router，另一種是自行引入vue-router

npm install vue-router --save

引入以后就可以在項(xiàng)目中使用vue-router啦

首先在src目錄下創(chuàng)建一個(gè)router文件夾，里邊再新建一個(gè)index.js文件，這個(gè)文件里就是用來配置vue-router

如圖目錄

在index.js里邊可以配置

//src/router/index.js

// 配置路由相關(guān)信息
import Vue from 'vue'    //引入vue
import Router from 'vue-router'    //引入vue-router
import HelloWorld from '@/components/HelloWorld'    //隨便一個(gè)示例組件

//1.通過Vue.use(插件)，安裝插件
Vue.use(Router)          //插件使用需要通過Vue.use(插件)配置以后才可使用

//2.創(chuàng)建VueRouter對(duì)象
const routes = [
  {
    path: "/",
    redirect: "/home",      //加載時(shí)就顯示的默認(rèn)路由
  },
  {
    path: "/home",        //路由路徑
    name: "helloworld",        //名稱
    component: HelloWorld        //路由顯示的內(nèi)容（也可以說是組件）
  }
]          //創(chuàng)建一個(gè)數(shù)組，router需要通過一個(gè)數(shù)組來進(jìn)行配置
const router = new Router({
  //配置路由和組件之間的應(yīng)用關(guān)系
  routes,            //將routes傳入router里使用
  mode: "history",    //鏈接地址中不再顯示#號(hào)，顯示方式為window.history模式
  linkActiveClass: "active"   //選中的路由的class名
})

//將router對(duì)象傳出，即可在vue實(shí)例中使用
export default router

路由創(chuàng)建完以后，在main.js中進(jìn)行引入

import Vue from 'vue'
import App from './App'
import router from "./router"

new Vue({
  el: '#app',
  router,        //引入router
  render: h => h(App)
})

引入完成后，路由就可以在App.vue中使用

<!-- App.vue -->
<template>
  <div id="app">
    <img src="">
    <!--tag屬性可以設(shè)置router-link渲染成什么標(biāo)簽；to屬性指定跳轉(zhuǎn)的鏈接-->
    <router-link to='/home' tag='button'>首頁</router-link>
    <router-link to='/home'  replace>首頁</router-link> <!--replace屬性可以讓用戶無法左上角返回按鈕返回上一頁-->
    <router-view/>        <!--會(huì)被解析路由所對(duì)應(yīng)的組件內(nèi)容-->
  </div>
</template>

如何通過代碼方式，調(diào)用router自帶的方法進(jìn)行路由跳轉(zhuǎn)呢？

<!-- App.vue -->
<template>
  <div id="app">
    <button @click='click1'>關(guān)于</button>
    <button @click='click2'>首頁</button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    click1(){
      this.$router.push("/about");    // push方式，用于可以按左上角返回上一頁
    },
    click2(){
      this.$router.replace("/home");    // replace方式，用于不可以按左上角返回上一頁
    }
  }
}
</script>

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

直接了當(dāng)一點(diǎn)：

<!--router/index.js-->
routes:[
  {
    path: "/user/:userid",    <!--這個(gè):userid就是在index.js中的路由上需要配置的值，在App.vue中對(duì)應(yīng)使用-->
    name: "user",
    component: user
  }
]

<!--App.vue-->
<template>
  <div id="app">
    <router-link :to="'/user/'+userid">用戶</router-link>    <!--在App.vue中綁定動(dòng)態(tài)路由數(shù)值-->
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return {
      userid:"zhangsan"
    }
  },
};
</script>

想要獲取當(dāng)前路由中的參數(shù)值？$route

<!--user.vue-->
<script>
   export default{
    name: "user",
    methods:{
      lookUserid(){
        console.log(this.$route.params.userid);
      }
    }
  }
</script>

拿到的userid值

路由懶加載方式

有些時(shí)候業(yè)務(wù)代碼量過大，會(huì)造成加載很慢，這個(gè)時(shí)候可以通過懶加載的方式對(duì)app進(jìn)行分包加載，用到的時(shí)候再去請(qǐng)求

<!--router/index.js-->
const helloWorld = () => import(../components/helloWorld)    //需要的時(shí)候再去import請(qǐng)求
const user = () => import(../components/user)

const routes = [
  {
    path: "/home",
    component: HelloWorld
  },
  {
    path: "/user",
    component: user
  }
]

路由傳參

2種方式：一種是通過params進(jìn)行傳參，一種是通過query進(jìn)行傳參

第一種：params傳參

<!--router/index.js-->
const user = () => import("../components/user")
const routes = [
  {
    path: "/user/:userid",
    component: user,
  },
 ]


<!--App.vue-->
<template>
  <router-link :to="'/user/'+userid">用戶</router-link>    //params值傳參
  <button @click="paramschuancan">用戶button</button>    //params值傳參
</template>

<script>
export default {
  name: "App",
  methods: {
    paramschuancan() {
      this.$router.push("/user/" + this.userid);        //此處的userid跟router/index.js中，route配置時(shí)填寫的userid對(duì)應(yīng)
    },
  }
}
</script>


<!--對(duì)應(yīng)組件中，例如user.vue-->
<template>
  <div>
    <h2>這里是用戶，是用來測(cè)試路由傳參，看鏈接中的參數(shù)</h2>
    通過$route.params方法查看頁面?zhèn)魅氲膮?shù):{{$route.params.userid}}
  </div>
</template>

第二種：query傳參

<!--APP.vue-->
<template>
  <div id="app">
    <router-link :to="{path:'/dangan',query:{name:'wangwu',age:'18',height:'1.88'}}">檔案</router-link>    //query傳參
    <button @click="querychuancan">檔案button</button>    //query傳參
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    querychuancan() {
      this.$router.replace({
        path: "/dangan",
        query: {
          name: "xiaoliu",
          age: "19",
          height: "1.78"
        }
      });
    }
  }
}
</script>


<!--對(duì)應(yīng)組件中，例如dangan.vue-->
<template>
  <div>
    <h2>這里是檔案，是用來測(cè)試路由傳參用的，看鏈接中的參數(shù)</h2>
    通過$.route.query方法查看頁面?zhèn)魅氲膮?shù):{{$route.query.name}},{{$route.query.age}},{{$route.query.height}}
  </div>
</template>

導(dǎo)航守衛(wèi)

我們需要在切換頁面以及url的時(shí)候，需要?jiǎng)討B(tài)修改頁面的title，不然一直會(huì)是index.html的title
一種方法自然就是通過在各個(gè).vue中配置生命周期鉤子來動(dòng)態(tài)設(shè)置document.title，不過這種方法需要一個(gè)個(gè)文件配置，繁瑣又麻煩，這里既然是路由，自然要通過路由的方法：全局導(dǎo)航守衛(wèi)

<!--router/index.js-->
const routes = [
  {
    path: "/home",
    component: home, 
    meta: {
      title: "首頁"
    }  
  }
]
router.beforeEach((to,form,next) => {    //to:跳轉(zhuǎn)到的路由  form:從哪個(gè)路由跳轉(zhuǎn)  next:必須執(zhí)行的下一步方法
  document.title = to.meta.title
  next()        //執(zhí)行完上邊想要執(zhí)行的操作以后，務(wù)必調(diào)用next()，不然不會(huì)往下走
                //可以next(false)，這樣可以阻止進(jìn)入to頁面，重新返回到from頁面；
                //或者是next('/home')，中斷當(dāng)前路由，不去to頁面，重定向一個(gè)頁面
})

后置鉤子

顧名思義是在切換路由以后運(yùn)行的

<!--router/index.js-->
router.afterEach((to,from) => {    //后置鉤子不需要next
  console.log(to.meta.title);
})

路由獨(dú)享守衛(wèi)

只有進(jìn)入當(dāng)前路由才會(huì)執(zhí)行的守衛(wèi)

<!--router/index.js-->
const routes = [
  {
    path: "/user",
    component: user,
    beforeEnter: ((to,from,next) => {
      console.log("這里是user的獨(dú)享守衛(wèi)")
    })
  }
]

keep-alive

字面意思保持存活，就是說在切換頁面時(shí)不銷毀上一個(gè)組件，因?yàn)榘凑丈芷?，路由切換的時(shí)候，上一頁組件是會(huì)被銷毀的。使用方法就是：在router-view組件外邊包上一個(gè)keep-alive

<!--某個(gè).vue文件-->
<keep-alive>
  <router-view></router-view>
</keep-alive>