一、vueRouter的面试题

1.1、vue路由时怎么传参的？

params传参
    传：
    this.$router.push({name:'index',params:{id:item.id}})
    接：        
    this.$route.params.id
路由属性传参
    传：
    this.$router.push({name:'/index/${item.id}'})
    接：
    路由配置 { path:'/index:id' }
query传参（可以解决页面刷新参数丢失的问题）
    this.$router.push({
    name:'index',
    query:{id:item.id}
    })

1.2、vue路由的hash模式和history模式有什么区别？

1.hash的路由地址上有#号，history模式没有
2.在做回车刷新的时候，hash模式会加载对应页面，history会报错404
3.hash模式支持低版本浏览器，history不支持，因为是H5新增的API
4.hash不会重新加载页面，单页面应用必备
5.history有历史记录，H5新增了pushState和replaceState()去修改历史记录，并不会立刻发送请求
6.history需要后台配置

1.3、路由导航守卫（拦截、路由钩子函数）

全局

```js
beforeEach // 路由进入之前
beforeResolve
afterEach // 路由进入之后
```

路由独享

```
beforeEnter //路由进入之前
```

组件内

```
beforeRouteEnter // 路由进入之前
beforeRouteUpdate // (2.2 新增) 路由更新之前
beforeRouteLeave // 路由离开之前
```
路由拦截是怎么实现的？
路由拦截 axios拦截
需要在路由配置中添加一个字段，它是用于判断路由是否需要拦截
{
    name:'index',
    path:'/index',
    component:Index,
    meta:{
        requirtAuth:true
    }
}
router.beforeEach((to,from,next) => {
    if(to.meta.requirtAuth){
        if( store.satte.token ){
            next()
        }else{
    
        }
    }
})
场景：要去拦截，判断用户是否是登录状态。功能：进入地址管理，用户如果没有登录是进入不了地址管理（在进入之前判断拦截），需要先登录。

1.4、说一下vue的动态路由。

要在路由配置里设置meat属性，扩展权限相关的字段，在路由导航守卫里通过判断这个权限标识，实现路由的动态增加和跳转
根据用户登录的账号，返回用户角色
前端再根据角色，跟路由表的meta.role进行匹配
把匹配搭配的路由形成可访问的路由

1.5、如何解决刷新后二次加载路由？

1.window.location.reload()
2.matcher
const router = createRouter()
export function resetRouter(){
    const newRouter = creatRouter()
    router.matcher = newRouter.matcher
}

1.6 $router和$route区别

$router不仅包含当前路由还包含整个路由的属性和方法

$route包含当前路由对象