router-路由
一、前端路由
- 路由對于后端來說就是請求的路徑和接口函數(shù)的一一對應關系爹梁。
- 前端路由的核心就是搀别，改變url ，但是頁面不會進行刷新执赡。也就是路徑的變化和不同的組件之間的切換镰踏。（地址---視圖）
二、路由規(guī)則
哈希模式（hash）
- URL 中的hash搀玖，本質(zhì)上是改變Windows中的href屬性余境，通過location.hash()來改變href，但是頁面不會刷新灌诅。
- 地址欄帶
#號芳来，刷新時發(fā)送請求不被帶到后端
新增的history模式
history.pushState({},'',?url) ： 改變href不刷新頁面
history.pushState({},'',?url) ： 替換上一個
history.go(-1) : 返回上一頁
三、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"*/ "對應想要顯示的組件的路徑")
}
]
2.懶加載
頁面刷新，只有指定的頁面才會被加載挎袜，被設置為函數(shù)
component:()=> import (/*webPackChunkName : "home"*/ "對應想要顯示的組件的路徑")不會立即執(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中, 我們可以有更加簡單的寫法來組織Vue異步組件和Webpack的代碼分割. 常用 const Home = () => import(/* webpackChunkName: "user" */ '../views/User.vue')
3.路由嵌套
在配置的路由下面顽聂，繼續(xù)添加
const routes=[
{
//配置路徑地址
path:"/home",
name:"Home",
//懶加載，
component:()=> import (/*webPackChunkName : "home"*/ "對應想要顯示的組件的路徑"),
children:[{
//相對路徑和絕對路徑兩種寫法
path : "",
component:()=> import (/*webPackChunkName : "home"*/ "對應想要顯示的組件的路徑")
}]
}
]
4.keep-alive
具有緩存作用盯仪，<router-view />展示在keep-alive 標簽下面時組件將會被緩存
-
原理
組件之所以會被緩存是因為紊搪，keep-alive 標簽可以將組件生命周期的銷毀和創(chuàng)建階段攔截（destroyed）（created）
此時生命周期的beforeactivated()和activated()被激活
-
include
指定需要緩存的組件
配置路由的時候添加name屬性，
<keep-alive :include=['name']> <router-view /> </keep-alive> -
exclude
指定不需要緩存的組件全景，同上
5.query和params
-
編程式導航
查詢字符串參數(shù) ： query
$router是路由對象//跳轉(zhuǎn)指定組件 this.$router.push("/user?page=22&size=5") this.$router.push({ path:"", query:{ page:5, size:10, } }) this.$router.push({ //路由命名 name : "" //配置路由時的name屬性 })路徑信息參數(shù) ： params
this.$router.push("/user/55824855") this.$router.push({ //只支持name name : "User", params : { id : 55824855 } })params 傳參數(shù)相當于在路徑上直接添加
//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">編程式導航中耀石，使用name進行路徑跳轉(zhuǎn)，攜帶參數(shù)可以通過params和query爸黄，其中query會將參數(shù)攜帶在導航路徑上滞伟，而使用path進行路徑跳轉(zhuǎn)揭鳞，無法攜帶params，只能攜帶query梆奈。</font>
6.獲取參數(shù)
this.$route.query.page || this.$rote.params.id
-
$route也是路由下的對象野崇，可以獲取到當前組件下配置的路由信息
7.重定向
const routs = [
{
//當頁面刷新或者導航欄上的地址只剩'/' 時，將地址欄上的地址重定向為 '/home/user'
path : "/",
redirect : "/home/user"
}
]
