router-路由

一、前端路由

1. 路由對(duì)于后端來(lái)說(shuō)就是請(qǐng)求的路徑和接口函數(shù)的一一對(duì)應(yīng)關(guān)系。
2. 前端路由的核心就是，改變url ，但是頁(yè)面不會(huì)進(jìn)行刷新。也就是路徑的變化和不同的組件之間的切換。（地址---視圖）

二、路由規(guī)則

哈希模式（hash）

• URL 中的hash，本質(zhì)上是改變Windows中的href屬性，通過(guò)location.hash()來(lái)改變href，但是頁(yè)面不會(huì)刷新。
• 地址欄帶#號(hào)，刷新時(shí)發(fā)送請(qǐng)求不被帶到后端

新增的history模式

• history.pushState({},'',?url) ： 改變href不刷新頁(yè)面

• history.pushState({},'',?url) ： 替換上一個(gè)

• history.go(-1) : 返回上一頁(yè)

三、Vue-router的使用

1.路由的使用

在views下新建vue文件，找到router/index.js

import Vue from 'vue'
import VueRouter from 'Vue-router'
Vue.use(VueRouter)
const routes=[
    {
        //配置路徑地址
        path:"/home",
        name:"Home",
        //懶加載，
        component:()=> import (/*webPackChunkName : "home"*/ "對(duì)應(yīng)想要顯示的組件的路徑")
    }
]

2.懶加載

頁(yè)面刷新，只有指定的頁(yè)面才會(huì)被加載，被設(shè)置為函數(shù)component:()=> import (/*webPackChunkName : "home"*/ "對(duì)應(yīng)想要顯示的組件的路徑")不會(huì)立即執(zhí)行

• 懶加載的方式

  // 方式一: 結(jié)合Vue的異步組件和Webpack的代碼分析
  const User = resolve => { require.ensure(['@/views/User.vue'], () => { resolve(require('@/views/User.vue')) }) };
  
  // 方式二: AMD寫法
  const User = resolve => require(['@/views/User.vue'], resolve);
  
  // 方式三: 在ES6中, 我們可以有更加簡(jiǎn)單的寫法來(lái)組織Vue異步組件和Webpack的代碼分割.   常用
  const Home = () => import(/* webpackChunkName: "user" */ '../views/User.vue')
  
  

3.路由嵌套

在配置的路由下面，繼續(xù)添加

const routes=[
    {
        //配置路徑地址
        path:"/home",
        name:"Home",
        //懶加載，
        component:()=> import (/*webPackChunkName : "home"*/ "對(duì)應(yīng)想要顯示的組件的路徑"),
        children:[{
                //相對(duì)路徑和絕對(duì)路徑兩種寫法
             path : "",
             component:()=> import (/*webPackChunkName : "home"*/ "對(duì)應(yīng)想要顯示的組件的路徑")
         }]
     }
]

4.keep-alive

具有緩存作用，<router-view />展示在keep-alive 標(biāo)簽下面時(shí)組件將會(huì)被緩存

• 原理

  組件之所以會(huì)被緩存是因?yàn)?，keep-alive 標(biāo)簽可以將組件生命周期的銷毀和創(chuàng)建階段攔截（destroyed）（created）

  此時(shí)生命周期的beforeactivated()和activated()被激活

• include

  指定需要緩存的組件

  配置路由的時(shí)候添加name屬性，

  <keep-alive :include=['name']>
      <router-view />
  </keep-alive>
  

• exclude

  指定不需要緩存的組件，同上

5.query和params

• 編程式導(dǎo)航

  查詢字符串參數(shù) ： query

  $router是路由對(duì)象

  //跳轉(zhuǎn)指定組件
  this.$router.push("/user?page=22&size=5")
  this.$router.push({
      path:"",
      query:{
          page:5,
          size:10,
      }
  })
  this.$router.push({
      //路由命名
      name : ""  //配置路由時(shí)的name屬性
  })
  

  路徑信息參數(shù) ： params

  this.$router.push("/user/55824855")
  this.$router.push({
      //只支持name
      name : "User",
      params : {
          id : 55824855
      }
  })
  

  params 傳參數(shù)相當(dāng)于在路徑上直接添加

  //App.vue中：
  this.$router.push('/user/12');
  
  // router/index.js中：
  path: '/user/:userId',
      
  // User.vue中：
  created(){
      console.log(this.$route.params.userId);    // 獲取到用戶id12
  }
  

<font color="red">編程式導(dǎo)航中，使用name進(jìn)行路徑跳轉(zhuǎn)，攜帶參數(shù)可以通過(guò)params和query，其中query會(huì)將參數(shù)攜帶在導(dǎo)航路徑上，而使用path進(jìn)行路徑跳轉(zhuǎn)，無(wú)法攜帶params，只能攜帶query。</font>

6.獲取參數(shù)

this.$route.query.page  ||  this.$rote.params.id

• $route也是路由下的對(duì)象，可以獲取到當(dāng)前組件下配置的路由信息

7.重定向

const routs = [
    {
       //當(dāng)頁(yè)面刷新或者導(dǎo)航欄上的地址只剩'/' 時(shí)，將地址欄上的地址重定向?yàn)?'/home/user' 
        path : "/",
        redirect : "/home/user"
    }
]