2020 Web 前端面试问题与答案 ----Vue 章节 - Vue-router

Vue-router的跳转原理:
vue-router实现单页面路由跳转，提供了三种方式： hash方式、history模式、abstract模式，根据mode参数来决定采用哪一种方式
● hash: 使用 URL hash 值来作路由。默认模式。
● history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
● abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端
路由之间的跳转:
声明式（标签跳转）：标签用于展示路由组件，DOM节点中使用v-link进行跳转，或使用router-link标签
编程式（js跳转）

怎么定义vue-router的动态路由以及如何获取传过来的动态参数？
在router目录下的index.js文件中，对path属性加上/：id
使用router对象的params id
Vue中,如何用watch去监听router变化
当路由发生变化的时候，在watch中写具体的业务逻辑

let vm = new Vue({
		el:"#app",
		data:{},
		router,
		watch:{
		$router(to,from){
			console.log(to.path);
		}
	}
})

vue-router有哪几种导航钩子？以及它的参数？
三种，一是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子
第三种：单独路由独享组件
beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种
Vue的路由实现: hash模式和history模式(Vue的两种状态)

1. hash——即地址栏URL的#符号，特点： 通过window.onhashchange的监听, 匹配不同的url路径，进行解析，加载不同的组件，然后动态的渲染出区域内的html内容，不会被包含在HTTP请求中,对后端完全没有影响
   HashHistory有两个方法：
   HashHistory.push（）是将路由添加到浏览器访问历史的栈顶
   hashHistory.replace( ) 是替换掉当前栈顶的路由
   因为hash发生变化的url都会被浏览器历史访问栈记录下来，这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来的，浏览器还是可以进行前进后退的

2. history —— 利用了HTML5 History Interface中新增的pushState（）和replaceState（）方法。这两个方式应用于浏览器的历史记录栈，提供了对历史记录的修改功能。history模式不怕页面的前进和后腿，就怕刷新，当刷新时，如果服务器没有相应的响应或者资源，就会刷出404，而hash模式不会。

$ router和$route的区别
3. $ route从当前router跳转对象里面可以获取name、path、query、params等（传的参数有this.$ route.query或者this.$route.params接收）
4. $ router为VueRouter实例。想要导航到不同URL，则使用$ router.push方式，返回上一个history也是使用$ router.go方法