路由前置知识

单页面应用（SPA) 指的是第一次进入页面的时候会请求一个html文件，切换到其他组件的时候，虽然路径会发生相应的变化，但是没有新的html文件请求，原理是JS会感知到url的变化，然后js会动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前的页面上，这个时候的路由不是由后端做的而是由前端来做的，来判断页面到底显示哪个组件，这个过程就是单页面的应用。

优点：页面切换快：因为页面每次切换的时候，并不需要做html文件的请求，这样就减少了很多http发送的时延

缺点：单页面应用的首屏加载时间较慢，首屏加载需要一次html请求和一次js请求，时间相对较慢，而且SEO效果差，因为搜索引擎只认识HTML中的内容，但是单页应用中的内容很多需要靠JS渲染出来，搜索引擎不识别这部分内容，就会导致SEO效果不好。

一前端路由的实现原理

前端路由的原理本质上就是在不刷新浏览器的请求下修改URL、检测URL的变化，截获URL的地址，通过解析、匹配路由规则从而实现URL的更新。路由的实现通常有两种形式一种是Hash模式，一种是History模式。

hash和history的路由模式还有很大的差别的，所以做个笔记加深印象，当然路由还有第三种模式abstract模式（了解一下）。 ##、hash模式与 history模式区别

1、区别

url地址栏上有#号，hash刷新页面不会发请求，页面不会有任何问题，hash路由模式的实现原理主要是通过事件监听hast的值的变化,大概的的模式就是,他是通过window.onHashChange=function(){}的原生事件来实现的。

history

区别

history地址栏上没有#号，history刷新页面会发送请求，服务器监听不到，页面会出现404，解决方式需要后端配合，history是利用history中内置的api来实现的popState（）和pushState来实现

二 keep-alive的理解

概念： 我们在进行路由切换组件的时候，其实组件是销毁了，所以当我们频繁切换组件的话，是开销很大，为了优化采取了组件缓存的机制。

用法

vue 内置的keep-alive组件把要缓存的组件包裹起来。

<keep-alive>
  <router-view></router-view>
<keep-alive>

问题：我只想缓存某个组件/我不想缓存某个组件----匹配缓存

语法：keep-alive组件的include属性和exclude属性先给对应的组件设置name属性名

补充：1、给组件起一个name的好处:会在调试工具里面显示组件名字，方便调试，2，做匹配缓存

//包含
<keep-alive  include='组件名1，组件名2'>
  <router-view></router-view>
<keep-alive>
//不包含
<keep-alive  exclude='组件名1，组件名2'>
  <router-view></router-view>
<keep-alive>

如何知道组件被切走了，还是切换回来了呢这里就扩展两个生命周期钩子函数

activated钩子：在在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用

activated钩子调用时机：第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发

deactivated钩子：组件被停用（离开路由）时调用

deactivated钩子调用时机：使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了，这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)

三 Vue-Router导航守卫

全局守卫

vue-router全局有三个守卫：

router.beforeEach 全局前置守卫进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子进入路由之后

四 route和router的区别？

$route是路由信息对象，包括‘path，hash，query，fullPath，matched，name’等路由信息参数；
$router是路由实例对象，包括了路由的跳转方法，实例对象等

第一步：npm i vue-router //安装vue-router
第二步：import VueRouter from 'vue-router'//导入路由
第三步： Vue.use(VueRouter) // 在vue中，使用使用vue的插件，都需要调用Vue.use()
第四步：创建路由规则数组
const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]
第五步：创建路由对象 -传入规则
const router = new VueRouter({
  routes
})
第六步：创建路由对象
new Vue({
  router
})

五路由之间是怎么跳转的？有哪些方式

1、router-link to="需要跳转到页面的路径"

2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面

3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面

4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

六. vue-router怎么配置路由

在vue中配置路由分为5个步骤，分别是

引入vue-router.js
配置路由path（路径）和组件，从而生成路由对象
把路由对象配置到new Vue中router选项下
页面使用< router-view> < /router-view>承载路由
< router-link to="要跳转的路径">< /router-link> 设置路由导航(声明式导航方式/编程式跳转)

七. vue-router的钩子函数都有哪些

关于vue-router中的钩子函数主要分为3类

全局钩子函数要包含beforeEach

beforeEach函数有三个参数,分别是:

to:router即将进入的路由对象
from:当前导航即将离开的路由
next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为false,终止导航。

单独路由独享组件

beforeEnter,

组件内钩子

beforeRouterEnter，
beforeRouterUpdate,
beforeRouterLeave

八. 路由传值的方式有哪几种

Vue-router传参可以分为两大类，分别是编程式的导航 router.push和声明式的导航

第一种router.push（编程式导航)

字符串：直接传递路由地址，但是不能传递参数 this.$router.push("home")

对象：命名路由这种方式传递参数，目标页面刷新会报错 - name+params

this.$router.push({name:"news",params:{userId:123})

查询参数和path配对的是query

this.$router.push({path:"/news',query:{uersId:123})

接收参数 this.$route.query

第二种声明式导航

声明式导航传参，在router-link上的to属性传参，语法格式如下

/path?参数名=值声明式导航接收
对应页面组件接收传递过来的值
$route.query.参数名

字符串 <router-link to:"news">

命名路由 <router-link :to:"{name:'news',params:{userid:1111}}">

还可以to="/path/值" - 需要提前在路由规则里值 /path/:key

查询参数

还可以to="/path?key=value

九编程式导航使用的方法以及常用的方法（必会）

路由跳转： this.$router.push()
路由替换 : this.$router.replace()
后退： this.$router.back()
前进：this.$router.forward()

十 Vue如何去除URL中的#号

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 URL 会自带 “#”。如果不想使用 “#”，可以使用 vue-router 的另一种模式 history：new Router ({ mode : 'history', routes: [ ]})

// 创建路由实例
const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // 指定路由规则
  routes: [
    ...constantRoutes // 静态路由, 首页
  ]
})

十一请说出路由配置项常用的属性及作用

路由配置参数：

path : 跳转路径
component : 路径相对于的组件
name:命名路由
children:子路由的配置参数(路由嵌套)
props:路由解耦
redirect : 重定向路由

十二路由重定向和404

路由重定向

匹配path后, 强制切换到另一个目标path上
redirect 是设置要重定向到哪个路由路径
网页默认打开, 匹配路由"/", 强制切换到"/find"上
redirect配置项, 值为要强制切换的路由路径
强制重定向后, 还会重新来数组里匹配一次规则

404页面

如果路由hash值, 没有和数组里规则匹配
path: ' * ' (任意路径)
默认给一个404页面
如果路由未命中任何规则, 给出一个兜底的404页面

十三路由守卫

通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录

全局守卫

vue-router全局有三个守卫

router.beforeEach 全局前置守卫进入路由之前 ( to,from,next 这三个参数 )
router.beforeResolve 全局解析守卫在beforeRouteEnter调用之后调用 ( to,from,next 这三个参数 )
router.afterEach 全局后置钩子进入路由之后 ( to,from,两个参数 )

to，from，next 三个守卫参数

to 将要离开的路由对象
from 将要进入的路由对象
next 是否放行这个参数是个函数，且必须调用，否则不能进入路由（页面空白）
- next（）进入该路由
- next（false）取消进入路由， url地址重定向为from路由地址（也就是将要离开的路由地址）
- next 跳转新路由，当前导航被中断，重新开始一个新的导航

Vue路由知识点

路由前置知识

一 前端路由的实现原理

1、区别

history

区别

二 keep-alive的理解

问题：我只想缓存某个组件/我不想缓存某个组件----匹配缓存

三 Vue-Router导航守卫

全局守卫

四 route和router的区别？

五 路由之间是怎么跳转的？有哪些方式

六. vue-router怎么配置路由

七. vue-router的钩子函数都有哪些

八. 路由传值的方式有哪几种

第一种router.push（编程式导航)

第二种 声明式导航

声明式导航传参，在router-link上的to属性传参，语法格式如下

九 编程式导航使用的方法以及常用的方法（必会）

十 Vue如何去除URL中的#号

十一请说出路由配置项常用的属性及作用

十二 路由重定向和404

十三 路由守卫

一前端路由的实现原理

五路由之间是怎么跳转的？有哪些方式

第二种声明式导航

九编程式导航使用的方法以及常用的方法（必会）

十二路由重定向和404

十三路由守卫