意识路由
- 路由用于设定拜访门路，将门路和组件映射起来
在vue-router中的单页面利用中，页面的门路的扭转就是组建的切换
后端路由：后端解决URL和页面之间的映射关系
前端路由：前端治理URL和页面之间的映射关系
vue-router根本应用
步骤一：装置vue-router
npm install vue-router --save
步骤二：在模块化工程中应用
- 导入路由对象，并调用Vue.use(VueRouter)，装置插件
import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);- 创立路由实例，并且传入路由映射配置
//从下层文件导入两个组件import Aaa from '../components/Aaa'import Bbb from '../components/Bbb'const routes = [//配置映射关系，一个{}对应一个组件 { path:'/aaa', component:Aaa }, { path:'/bbb', component:Bbb }]const router = new VueRouter({ routers})export default router- 在Vue实例中挂载创立的路由实例
new Vue({ el:'#app', router, render: h => h(App)})应用vue-router的步骤：
- 创立路由组件
- 配置路由映射：组件与门路映射关系
- 应用路由：通过
<router-link>和<router-view>
<router-link>:该标签是vue-router中曾经内置的组件，它会被渲染成一个<a>标签.<router-view>:该标签会依据以后的门路，动静渲染出不同的组件.
<router-link>的属性：
- to：用于指定跳转的门路
<router-link to="/about">对于</router-link>- tag:能够指定
<router-link>之后渲染成什么组件
<router-link to="/about" tag="button">对于</router-link>- replace:不会留下history记录，因而指定replace的状况下，后退键不能返回到上一个页面中
<router-link to="/about" tag="button" replace>对于</router-link>//replace前面不须要加任何货色vue-router动静路由
1.配置user，创立一个简略的映射关系
{ path:'/user/:aaa', component:User}- 在
<router-link>中应用v-bind动静绑定
<router-link ：to="/user/+userId">用户</router-link>3.在User.vue文件中拿到传过来的用户ID
userId(){ return this.$route.params.aaa}路由的懒加载
当打包构建利用时，Javascript包会变得很大，因而将路由对应的组件宰割成不同的代码块，当路由被拜访时才加载对应组件，提高效率.
懒加载的形式：
- 联合Vue的异步组件和Webpack的代码剖析
const Home = resolve => {require.ensure(['../components/Home.vue'],() => {resolve(require('../components/Home.vue'))})};- AMD写法
const About = resolve => require(['../components/About.vue'],resolve);3.在ES6中，能够用更简略的写法来组织Vue异步组件和Webpack的代码宰割
const Home = () => import('../components/Home.vue')//举荐写法,写在入口文件中vue-router嵌套路由
在理论利用界面中，页面往往由多层嵌套的组件组成
- 定义“登录”和“注册”两个组件
<template id="login"> <div>登录界面</div></template> <template id="reg"> <div>注册界面</div></template>//定义路由组件const Login = { template: '#login' }; const Reg = { template: '#reg' };2.定义路由，通过children嵌套
const routes = [ { path: '/', redirect: '/home' }, { path: '/home', component: Home, children:[ { path: '/home/login', component: Login}, { path: '/home/reg', component: Reg} ] }, { path: '/news', component: News}]vue-router参数传递
传递参数次要有两种类型：params和query
params的类型：
- 配置路由格局：
/router/:id- 传递的形式：在path前面跟上对应的值
- 传递后造成的门路：
/router/aaa,/router/bbbquery的类型：
- 配置路由格局：
/router，也就是一般配置- 传递的形式：对象中应用query的key作为传递形式
- 传递后造成的门路：
/router?id=aaa,/router?id=bbb这里讲一下URL：
协定：//主机：端口/门路？查问
scheme://host:port/path?query#fragment
vue-router导航守卫(guard)
一、全局守卫
前置钩子(hook)
router.beforeEach((to,from,next)=>{ })to：行将要进入的指标的路由对象
from：以后导航行将要来到的路由对象
next：调用该办法后，能力进入下一个钩子
能够利用beforeEach来实现题目的批改
后置钩子
router.afterEach((to,from)=>{ })只有两个参数，to和from
二、组件内的守卫
beforeRouteEnter
beforeRouteEnter:(to,from,next)=>{}留神：beforeRouteEnter函数在data()函数之前，即，调用beforeRouterEnter函数时，组件还没有初始化,此时不能应用this来代表实例组件
beforeRouteUpdate
beforeRouteUpdate:(to,from,next)=>{}beforeRouteLeave
beforeRouteLeave:(to,from,next)=>{}三、路由独享的守卫
beforeEnter:(to,from,next)=>{}用法与全局前置守卫统一，只是将其写进其中一个路由对象中，只在这个路由下起作用
keep-alive
keep-alive是Vue内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染
<keep-alive> <component> <!--该组件将被缓存--> </component></keep-alive>include：字符串或正则表白，只有匹配的组件会被缓存
<keep-alive include="a"> <component> <!-- name 为 a 的组件将被缓存！ --> </component> </keep-alive>exclude：字符串或正则表达式，任何匹配的组件都不会被缓存
<keep-alive exclude="a"> <component> <!-- 除了 name 为 a 的组件都将被缓存！ --> </component> </keep-alive>router-view 也是一个组件，如果间接被包在 keep-alive 外面，所有门路匹配到的视图组件都会被缓存
<keep-alive> <router-view> <!-- 所有门路匹配到的视图组件都会被缓存！ --> </router-view> </keep-alive>减少 router.meta 属性
//routes配置export default [ { path:'/', name:'home', component:Home, meta:{ keepAlive:true //须要被缓存 } },{ path:'/:id', name:'edit', component:Edit, meta:{ keepAlive:false //不须要被缓存 } }]<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!--这是是会被缓存的视图组件，比方Home--> </router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"> <!--这是是不会被缓存的视图组件，比方Edit--></router-view>