什么是vue-router?
SPA单页面应用:
实现SPA(single page application)单页面应用:一个项目只有一个页面,我们基于路由,控制页面显示不用的代码片段(或组件),当展示的内容改变的时候,页面并不会刷新! !
MPA多页面应用:
MPA(multi page application)多页面应用:一个项目有很多页面,我们做的是页面之间的跳转,每一次跳转都是打开一个新的页面(相当于)页面刷新了)! !
1. 首屏服务器渲染 「骨架屏」
2. 其余屏幕还是交给客户端渲染
单页面&&多页面对比图
前端 路由的两大模式
哈希路由（hash router）:监听URL地址后面的HASH值
http://www.xxx/com/index.html#home
window.onhashchange事件来控制更改页面渲染的内容浏览器路由（browser/history router）:基于h5中的history api实现的
区别
1 hash路由地址不好看，browser路由好看一点
2. 实现机制不同
第一步: $ npm i vue-router
第二步:创建路由规则表
方案一:写在index.js里
import Home from '@/views/Home.vue';
import login from '@/views/login.vue';
import order from '@/views/order.vue';
//创建index.js文件并配置vue-router的模式和路由规则表
//src/router/index.js :作用是创建vue路由实例，并配置路由
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)//导入vue vue-router,注册使用
const router = new VueRouter({
mode: 'hash', //设置路由模式 hash history(默认)
//设置路由匹配规则[路由表]
routes: [{
path: '/', //指定hash值(pathname值)
component: Home//渲染的组件
}, {
path: '/iogin',
component: login
}, {
path: '/order',
component: order
}, {
path: '*',//如果没有匹配项,
redirect: '/'//重定向到首页(也可以渲染一个404组件)
}]
});
export default router方案二 写在routes.js里
1.把路由表抽离出来 ,放到routes.js里单独管理,并且导出
import Home from '@/views/Home.vue';
import login from '@/views/login.vue';
import order from '@/views/order.vue';
const routes = [{
path: '/',
component: Home
}, {
path: '/iogin',
component: login
}, {
path: '/order',
component: order
}, {
path: '*',
redirect: '/'
}]
export default routes2.在index导入挂载
import routes from './routes.js'
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'hash',
routes
});
export default router第三步:实现路由跳转(改变URL地址 或者哈希值)
注意:每一次的路由切换,都是把上一个渲染的组件释放(销毁beforeDestory-->destroyed) ,把新匹配的组件进行渲染(beforeCreate-->created-->beforeMount-->mounted)
第四步:设置一个容器,可以在指定的位置,把基于路由规则匹配的组件进行渲染
<router-view></router-view>就是我们指定的组件渲染的位置<template>
<div id="app">
<div class="navBox">
<!-- 内置组件(路由跳转.切换组件),
点击实现路由跳转,基于"to"属性指定跳转地址
页面渲染的时候会把router-link渲染为a标签
-->
<router-link to="/">首页</router-link>
<router-link to="/login">登录页</router-link>
<router-link :to="{ path: '/order' }">订单页</router-link>
</div>
<main class="mainBox">
<!--
内置组件(路由容器),渲染"基于"路由规则匹配的组件
当页面刷新或路由跳转后,vue都会拿URL最新地址(或哈希值)去路由表中进行匹配,
把匹配到的组件,放到router-view容器中渲染
-->
<router-view></router-view>
</main>
</div>
</template> <router-link to="/">首页</router-link>
<router-link to="/analyse">分析页</router-link>
<router-link :to="{ path: '/order' }">订单页</router-link>router-view
router-view容器中渲染beforeDestroy=>destroyed)，把新匹配的组件进行渲染(beforeCreate->created->beforeMount->mounted)
<main class="main-box">
<router-view></router-view>
</main>精准匹配/非精准匹配/完全不匹配：
页面刷新或路由切换：都会拿最新的地址(或哈希值)与每一个router-link中to属性的值(或者path属性值)进行匹配；完全“精准”匹配的会给A标签设置：router-link-exact-active router-link-acive 两个样式名；非精准匹配的只设置：router-link-active这个样式类，一点都没匹配的，啥样式都不设置！！=>==我们后期可以基于这个特点，给当前匹配的导航设置选中特殊样式==
页面地址:/order
to的地址：
/ 非精准匹配 (包含一个完整的)
/ : 任何地址都包含一个完整的斜杠
/home2 VS /home 不算(完全不匹配)
/home/list VS /home 算(前面router-link的值的包含后面路由表里的值)
/analyse 完全不匹配
/order 精准匹配(一毛一样)
//------------------------------------------------
根据精准匹配设置样式
&.router-link-exact-active {
color: red;
}二级路由也是路由表的形式，只是里面的路径：
import Home from '@/views/Home.vue';
import login from '@/views/login.vue';
import order from '@/views/order.vue';
import hoomeRoutes from './homeRoutes';
// 路由根据路由表时自上而下匹配的，只要有一个匹配就直接跳转，所以path:"*"不能在最前面匹配
const routes = [{
path: '/',
redirect: '/home'
}, {
path: '/home',
component: Home,
children: hoomeRoutes,//二级路由
},
{
path: '/login',
component: login
}, {
path: '/order',
component: order
}, {
path: '*',
redirect: '/'
}]
export default routes
-------------------------------------------------------------
//管理home模块的路由表(二级/三级路由)
import CustomList from '../views/Home/CustomList.vue';
import CustomAdd from '../views/Home/CustomAdd.vue';
import VisitList from '../views/Home/VisitList.vue';
const hoomeRoutes = [{
//如果/home后面没有跟路径，则默认将它重定向到'/home/customerlist',也就是让他第一次打开home就在custmerlist页面
path: '',
redirect: '/home/customlist'
}, {
path: 'customlist',//-->/Home/CustomList
component: CustomList
}, {
path: 'customadd',
component: CustomAdd
}, {
path: 'visitlist',
component: VisitList
}];
export default hoomeRoutes;vue前端性能优化之一:路由懒加载 分割打包按需导入
问题：如果在编写路由表的时候，事先导入了所有组件，根据规则渲染不同的组件，这样最后build打包的时候，会把所有组件全部打包到一个js中，js文件较大，页面第一次渲染请求js时间过长，延长了白屏事件~~~
解决：路由懒加载依托于ES6中提供的import函数
()=>import (/* webpackChunkName: 'analyse' 的形式导入指定路径组件的就是==路由懒加载==import Home from '@/views/Home.vue';
import hoomeRoutes from './homeRoutes';
const routes = [{
path: '/',
redirect: '/home'
}, {
//首页不做懒加载
path: '/home',
component: Home,
children: hoomeRoutes,//二级路由
},
//其余页面先不加载,匹配之后在加载
{
path: '/login',
component: () => import('@/views/login.vue')
}, {
path: '/order',
component: () => import('@/views/order.vue')
}, {
path: '*',
redirect: '/'
}]
export default routes()=>import("@/pages/home/VisitList.vue") 的形式使组件路由懒加载，都会形成一个单独的js文件，这样就会导致项目中js文件很多。/* webpackChunkName: 'analyse'*/这样，它以及它子孙组件就会打包成一个js组件，实现了按包分割的功效，减少了js文件数量{
path: '/login',
component: () => import(/* webpackChunkName: 'login' */'@/views/login.vue')
},当我们"new Vue({router})",会给每一个组件(vue实例)注入两个私有属性
$route: 内部做了get劫持,可以监听到路由的变化
#home?xxx#aaa,hash的值就是#aaa$router:
私有属性方法
公有属性方法：
push 跳转到指定路由 (this.$router.push('/login')),等同于<router-link to='/login>
对象写法:可以传参了
this.$router.push({
push.'/login'
})图解:
路由切换的传参方式
每一次路由切换想把一些信息传递给下一个组件
1.问号传参#/xxx?xxx=xxx[丑&可以在地址栏中看到传递信息]
//AZ组件向B组件传参
//A组件
this.$router.push({
path:"/B",
query:{
lx:1,
from:"weixin"
}
})
//B组件--------------------
created() {
console.log(this.$route.query);
},
//基于this.$route.query获取即可->{lx:1,from:"weixin"}
------------
//因为地址栏中有，即使手动刷新B野蛮，信息还可以获取2.隐式传参： #/xxx 地址栏中看不见，从内部把信息传递过去&&需要基于路由名字跳转，基于path跳转不可以
建议:后期在编写路由表时,给每一个路由设置一个名字'命名路由',后期实现路由跳转,可以不基于path跳转基于name也可以跳转
//A组件
this.$router.push({
name:"B"//用name指定要跳转到那个路由
path:"/B",
params:{
lx:1,
from:"weixin"
}
})
//B组件
created() {
console.log(this.$route.params);
},
//基于this.$route.params获取即可->{lx:1,from:"weixin"}
------------
因为传递的信息在地址栏中不存在,所以在b页面刷新,传递的信息就没有了
3.路径参数:把需要传递的数据,当做理由地址的一部分 例如#/xxx/100[常用]因为不丑
第一步:设置路由表:xxx是设置动态规则
{//这种是不传参数时匹配的customadd路由路径
name:"home_customadd",
path: 'customadd',
component: () => import(/* webpackChunkName: "home" */'@/pages/home/CustomAdd.vue')
},
{//这种是需要传参数id和name匹配的路由路径
name:"home_customadd",
path: 'customadd/:id/:name',
component: () => import(/* webpackChunkName: "home" */'@/pages/home/CustomAdd.vue')
}第二步：实现路由跳转
this.$router.push("/home/customadd/100/lisa");第三步：获取
this.$router.params()->{id:"100",name:"lisa"};案例 客户管理系统新增客户与编辑客户是同一个路由
<template>
<div class="CustomAdd">{{ title }}</div>
</template>
<script>
export default {
name: "CustomAdd",
//新增用户还是修改用户由title决定
data() {
return {
title: "新增客户",
};
},
//释放的上一个组件和即将渲染的下一个组件，是同一个组件，此时这个组件即不会被释放，也不会被重新渲染(也就是第一次渲染的逻辑就不会触发了，created就不会在执行了)
created() {
//存储路径传参或者隐式传参信息
let { id } = this.$route.params;
if (id) {
this.title = "修改客户";
}else {
this.title = "新增客户";
}
},
};
</script>路由跳转的特殊情况：路由切换的时候，要释放的上一个组件和即将渲染的下一个组件，是同一个组件，此时这个组件即不会被释放，也不会被重新渲染(也就是第一次渲染的逻辑就不会触发了，例如:created就不会在执行了)
==解决方案一==：基于watch监听路由的变化监听路由的变化，从而做一些事情
watch: {
$route() {
//监控vm实例中的私有$route属性只有改变时执行
let { id } = this.$route.params;
if (id) {
this.title = "修改客户";
} else {
this.title = "新增客户";
}
},
},
---------------------------------------
watch: {
$route: {
handler() {
let { id } = this.$route.params;
if (id) {
this.title = "修改客户";
} else {
this.title = "新增客户";
}
},
immediate: true,//重新渲染组件(第一次渲染逻辑),让监听器处理
},
},解决方案二:把需要依赖路由变化而变化的的信息,都设置为计算属性
computed: {
title() {
let { id } = this.$route.params;
return id ? "修改客户" : "新增课户";
},
},VueRouter的实例属性就是创建路由时可以添加的属性：
name:"名字"：==命名路由==，设置路由表时必须加的属性，名字不能重复,后期实现路由跳转可以不基于path，基于name也可以跳转path:"/home":表示在路由表中注册/home路径的路由信息，当请求的hash值或地址为/home时，就会去路由表中精准匹配到/home路径下指定的组件，并进行切换component:[组件]：指定需要切换(渲染)的组件redirect:"/list":将这个路径重定向到path为/list的路径下面children:[数组]：二级路由，也如同组件，是数组形式一般二级路由会单独提出来，再导入meta:{任何类型}：路由元信息：记录每一个路由表的一些基础信息this.$router.meta:获取在每一次页面刷新(或者路由跳转),路由进行规则匹配的时候,也会触发一些钩子函数
A组件----B组件
beforeRouterLeave钩子函数(写A在组件中)beforeEnter【写在路由表中】真实项目中,我们最常用的是 全局前置守卫"beforeEach",每一次页面刷新(或路由跳转),也不论从哪跳到哪,beforeEach一定会被触发! !
例如:我们一般会在beforeEach前置守卫中,做登录状态的校验(只有不是进入登录页,都需要在这校验一下用户是否登录,如果登录了,正常进行后面的步骤,如果没有登录,直接让其返回登录页)
代码
router.beforeEach((to, from, next) => {
//to:去哪 from:从哪来
//next:进行下一步[如果next不执行,卡在这结束了 后面啥都不做]
//next()之前规划咋走则,继续往下走,
// next('/login')直接走到某个指定的路由
let title = to.meta.title;
if (title) document.title = title
next()
})面包屑导航
//---路由表中
{
name: 'homeCustomlist',
path: 'customlist',//-->/Home/CustomList
component: CustomList,
meta: {
title: "首页--客户列表",
nav: ['首页', '客户列表']
},
},
页面中------
<template>
<div class="CustomList">
{{ $route.meta.nav.join("/") }}
</div>
</template>扩展
keep-alive：组件缓存scrollBehavior(to,from,savePosition){return {x:0,y:0}}:滚动行为，组件跳转的时候规定组件显示 滚动的位置