意识路由
- 路由用于设定拜访门路，将门路和组件映射起来
在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>
发表回复