一. 安装router
二. 在模块化中使用它
1.导入路由对象 import? ? ?form，并且调用Vue.use（VueRouter）安装，调用Vue.use安装插件前需引入Vue
// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// 1.通过Vue.use安装插件
Vue.use(VueRouter);2.创建路由实例，并且传入路由映射配置（导出router）
const routes = [
{
path: '/home',
component: Home
},
{
path: '/about',
components: about
}
]
// 2.创建VueRouter对象
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes
})// 3.将router对象传入到Vue实例
export default router3.在Vue实例中挂载创建的路由实例（导入router）
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
render: h => h(App)
})二.使用vue-router的步骤
第一步：创建路由组件
第二步： 配置路由映射：组件和路径映射关系
const routes = [
{
path: '/home',
component: Home
},
{
path: '/about',
components: about
}
]第三步:? 使用路由：通过<router-link>和<router-view>（放在哪个位置）
三. 默认路径就是首页
1.多配置一个映射就可以了
{
path: '',
redirect: 'home' //重定向首页的组件
},2. 默认hash为#号网址，改为不带#号的加一句 mode："history"
3.<router-link>一些属性
to：指定hash
tag：指定<router-link>渲染成什么组件
replace：不会留下history记录，不能前进后退
active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称
四. 第二种跳转方式(可实行js代码）
用监听事件来绑定如button，在实例化router里写methods在调用方法，this.$router = router
<template>
<div id="app">
<button @click= "homeClick">首页</button>
<button @click= "aboutClick">分页</button>
<button @click= "userClick">用户</button>
<button @click= "profileClick">个人档案</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
userId: 'lisi',
};
},
methods: {
homeClick(){
this.$router.push('/home')
},
aboutClick(){
this.$router.replace("/about")
},
userClick(){
this.$router.replace('/user/' + this.userId)
},
profileClick(){
this.$router.replace({
path: '/profile',
query: {
name: 'why',
age: '18',
height: 180
}
})
}
}
}
</script>1.push 跟 replace区别?
? ?push = pushState(可前进后退)
? ?replace = replaceState（不可前进后退）
2.$router 跟 $route区别
? ??$router为VueRouter实例，导航页面需要使用.$router.push方法
? ? $route为当前route跳转对象里面可以获取name，path，query，params等
五. 动态路由
1.创建一个组件
2.在router里引入组件，实例化，搭建映射表 导出
const routes = [
{
path: '',
redirect: 'home' //重定向
},
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/user/:aaa', //不确定，动态
component: User
}
]
// 2.创建VueRouter对象
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes,
mode: 'history',
})3.在App.vue里渲染
<router-link :to ="'/user/' + userId" tag = "button" replace>用户</router-link>
<router-view></router-view>
<script>
export default {
name: 'App',
data() {
return {
userId: 'zhangsan',
};
},
methods: {
homeClick(){
this.$router.push('/home')
},
aboutClick(){
this.$router.replace("/about")
}
}
}
</script>4.展示（在组件里用computed调用$route(活跃）params.userId）获得用户的id
<template>
<div>
<h2>用于目录</h2>
<h2>用户页面</h2>
<h2>{{$router.params.aaa}}</h2>
</div>
</template>
<script>
export default {
name: 'User',
};
</script>六. 打包解析
1. npm run build (打包）
以app开头的是自己写的业务代码
manifest开头的是底层支持
vendor开头的是第三方提供商
2.懒加载，不会出现加载空白
?把import? ?form ‘’改成 cosnt? ?=（）=>（‘’）?
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
七.嵌套路由
第一步：创建对应的子组件，并且在路由映射中配置对应的子路由
const routes = [
{
path: '',
redirect: 'home' //重定向
},
{
path: '/home',
component: Home,
children: [
{
path: '',
redirect: 'new'
}
,{
path: 'new',
component: HomeNew
},
{
path: 'message',
component: HomeMessage
}
]
},
{
path: '/about',
component: About
},
{
path: '/user/:userId',
component: User
}
]
// 2.创建VueRouter对象
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes,
mode: 'history',
})第二步： 在组件内部使用<router-view>标签
七传递参数的方式
传递参数主要有两种类型：params和query
params类型
配置路由格式：/router/:id
传递的方式：在path后跟上对应的值
传递后形成的路劲：/router/123,? /router/abc
网址构成：协议：服务器端口：路劲：query：片段
query的类型：
配置路由格式：/router 普通配置
传递的方式：对象中使用query的可以作为传递方式
传递后形成的路径： /router？id = 123，/router? id = abc
八.导航守卫
路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。
1.生命周期
create（）{}? ?创建就回调
mounted（）{}? 模版挂载在dome时回调
updated（）{}? 更新的时候回调
activated() { } 活跃
destroyed() {} 销毁
2.前置钩子跟后置钩子的区别
? 前置钩子：beforeEach需要调用next（）执行，在跳转之前执行
router.beforeEach((to, from, next) => {
next()
});后置钩子： afterEach不需要调用next（）执行，跳转之后执行
router.afterEach((to, from, next) => {
});3.使用全局导航守卫
先给路由映射配置元数据 meta：{title： ‘’}，
在通过来统一执行
router.beforeEach((to, from, next) => {
/* must call `next` */
document.title = to.matched[0].meta.title;
console.log(to);
next()
});4.路由导航守卫（注意是Enter）
{
path: '/about',
component: About,
meta: {
title: '分页'
},
beforeEnter: (to, from, next) => {
/* must call `next` */
console.log(111111);
next()
}
},5.keep-allive 缓存不会销毁
keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
<keep-alive>
<router-view></router-view>
</keep-alive>1.只有在keep-allive渲染<router-view/>的情况下生命函数才起作用
2.keep-alive有两个非常重要的属性
? ? ? ? include 只有匹配的组件会被缓存
? ? ? ? exclude 匹配组件不缓存，清除缓存重新创建