Vue-Router⾯试题
路由导航守卫和Vue实例⽣命周期钩⼦函数的执⾏顺序？
路由导航守卫都是在Vue实例⽣命周期钩⼦函数之前执⾏的
vue-router有哪⼏种导航钩⼦（导航守卫）？
全局守卫：
全局前置守卫：beforeEach
router.beforeEach((to, from, next) => {
/* 必须调⽤ `next` */
})
全局解析守卫：beforeResolve
router.beforeResolve((to, from, next) => {
/
* 必须调⽤ `next` */
})
全局后置钩⼦：afterEach
router.afterEach((to, from) => {})
路由独享守卫
beforeEnter
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
组件内的守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调⽤
// 不！能！获取组件实例 `this`
// 因为当守卫执⾏前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复⽤时调⽤
// 举例来说，对于⼀个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复⽤。⽽这个钩⼦就会在这个情况下被调⽤。    // 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调⽤
react router路由传参
// 可以访问组件实例 `this`
}
}
讲⼀下完整的导航守卫流程？
导航被触发
在失活的组件⾥调⽤离开守卫beforeRouteLeave()
调⽤全局前置守卫beforeEach((to,from,next)=>{})
再重⽤的组件⾥调⽤beforeRouteUpdate(to,from,next)守卫
在路由配置⾥调⽤路由独享的守卫beforeEnter(to,from,next)
解析异步路由组件
在被激活的组件⾥调⽤beforeRouteEnter(to,from,next)
在所有组件内守卫和异步路由组件被解析之后调⽤全局解析守卫beforeResolve((to,from,next)=>{})导航被确认
调⽤全局后置钩⼦afterEach((to,from)=>{})
触发DOM更新
⽤创建好的实例调⽤beforeRouteEnter守卫传给next的回调函数
导航守卫的三个参数的含义？
to: 即将要进⼊的⽬标路由对象
from: 当前导航正要离开的路由对象
next: ⼀定要调⽤该⽅法来resolve这个钩⼦，不然路由跳转不过去
next(): 进⼊下⼀个路由
next(false): 中断当前的导航
next('/')或next({ path: '/' }) : 当前导航被中断，进⾏新的⼀个导航。
route和router有什么区别？
this.$route是当前路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数
this.$router是路由实例对象，包括了路由的跳转⽅式（push(),go()），钩⼦函数等
获取路由实例配置项：utes  = this.$utes
获取当前页⾯路由路径
this.$route.path
在vue组件中怎么获取当前的路由信息？
this.$route
怎么重定向页⾯？
重定向path
const router = new Router({
routes: [
{path:'/a', redirect:'/b'}
]
})
重定向到命名的路由
const router = new Router({
routes: [
{path:'/a', name:'Baa'}
]
})
可以写成⼀个⽅法，动态返回重定向的⽬标
const router = new Router({
routes: [
{
path:'/a',
redirect: to => {
return {path: '/bbb', query: {a: 1}}
}
}
]
})
vue-router怎么配置404页⾯？
在router.js中，由于路由是从上到下执⾏的，只要在路由配置中最后⾯放个*号就可以了
const router = new Router({
routes: [
{
path: '*',
redirect: '/404'
}
]
})
说说你对router-link的了解？（待完善）
<router-link>是Vue-Router的内置组件，在具有路由功能的应⽤中，作为声明式的导航使⽤
<router-link>有8个props，作⽤如下：
to：必填，标识⽬标路由的链接，当被点击后，内部会⽴刻把to的值传到router.push()，所以这个值可以是⼀个字符串或者是描述⽬标位置的对象注意path存在时，params不起作⽤，只能⽤query
replace：默认值为false，若设置的话，当点击时，会调⽤place()⽽不是router.push()，于是导航后不会留下history记录
append：设置append属性后，则在当前（相对）路径前添加基路径
设置append属性后，则在当前 (相对) 路径前添加基路径。例如，我们从/a导航到⼀个相对路径b，如果没有配置append，则路径为/b，如果配
了，则为/a/b
tag：让<router-link>渲染成tag设置的标签，如tag="li"，就会渲染成<li>跳转</li>
active-class：默认值为router-link-acitve，设置链接激活时使⽤的CSS类名，默认值可以通过路由的构造选项linkActiveClass来全局配置
exact-active-class：默认值为router-link-exact-active，设置连接呗精确匹配的时候应该激活的class，默认值可以通过路由构造函数选项linkExactActiveClass进⾏全局配置
exact：是否精确匹配，默认为false
event：声明可以⽤来触发导航的事件，可以是⼀个字符串或是⼀个包含字符串的数组，默认是click
<router-link to="home">Home</router-link>
<router-link :to="'home'">Home</router-link>
<router-link :to="{ path: 'home' }">Home</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<router-link :to="{ path: 'user', query: { userId: 123 }}">User</router-link>
说说active-class是哪个组件的属性？
<router-link/>组件的属性，设置连接激活时使⽤的css类名，默认值可以通过路由的构造选项linkActiveClass来全局配置
css
.nav .active{
  color: red;
}
router.js
export default new Router({
  linkActiveClass:'active',
  routes:[]
})
路由之间跳转有哪些⽅式？
声明式：通过内置组件<router-link>跳转
<router-link :to="/home">
编程式：通过调⽤router实例的push⽅法
this.$router.push({path: "home", query: {num: 1}})
或
this.$place({path:'/home'})
vur-router传参？
query传参和接收参数
this.$router.push({
path:'/home',
query:{id:1}
})
    query接参：this.$route.query.id
params传参和接收参数
this.$router.push({
name:'Home',
params:{a:1}
})
params接参：this.$route.params.userId
注意：params传参，push⾥⾯只能是name:'xxxx'，不能是path:'/xxx'，因为params只能⽤name来引⼊路由，如果这⾥写成了path，⽬标页⾯接收参数会是undefined
如何监听路由参数的变化？
有两种⽅法可以监听路由参数的变化，但是只能⽤在包含<router-view/>的组件内
watch监听$route对象
watch:{
  '$route'(to,from){
    console.log(to, from)
  }
}
2. beforeRouteUpdate
beforeRouteUpdate (to, from, next) {
// react to
// don't forget to call next()
}
query和params的区别？
query刷新页⾯参数不会消失，params刷新页⾯参数会消失，可以考虑本地存储解决
query传参会显⽰url地址上，params传参并不会显⽰在地址栏
切换路由时，需要保存草稿的功能，怎么实现？
使⽤<keep-alive>包裹<router-view>
<keep-alive>
  <router-view></router-viewe
</keep-alive>
vue路由中去掉 #
路由router.js配置mode:'history'
const router = new Router({
  mode:'history'
})
history模式
history模式利⽤HTML5 History Interface中新增的pushState()和replaceState()⽅法，这两个⽅法应⽤于浏览器的历史记录栈，提供了对历史记录进⾏修改的功能，只是当他们进⾏修改时，虽然修改了url，例如aaaa/user/id，相⽐hash模式更加好看，需要注意的是，history模式需要后台配置⽀持，如果后台没有正确配置，访问时会返回404，通过history api，我们丢弃了丑陋的#，但是也有⼀个缺点，当刷新时，如果服务器中没有相应的响应或者资源，会刷新⼀个404。
hash模式和history模式相⽐较
hash模式：
url路径会出现”#“字符
hash值不包括在http请求中，他是交由前端路由处理，所以改变hash值时不会刷新页⾯，也不会向服务器发送请求
hash值的改变会触发hashchange事件
history模式：
url值不会出现“#”字符
整个地址重新加载，可以保存历史记录，⽅便前进后退
依赖于H5 API和后台配置，没有后台配置的话，页⾯刷新会出现404
前端的url必须和实际向后端发起请求的url⼀直，如aaaa/user/id，后端如果没有对user/id的路由做处理，将返回404错误