1：什么是路由？
1：组件和url路径的映射关系。
2：前端最初是一个地址对应的一个页面，地址改变整个页面刷新、页面改变就是组件的切换、后面有了ajax，实现了局部刷新。
3：单页面：不刷新页面的情况下局部更新。缺点：首次加载太多，初次进入慢。
2：什么是前端路由？什么是前端渲染？
后端返回的是json数据，前端根据数据去构建html页面、后端渲染直接返回的是html页面
3：路由实现思路？
拦截不让跳转、监听url变化展示对应的组件、前端维护路由规则
4：安装方法？
npm install vue-router@4
yarn add vue-router@4
5：怎么使用？
1：router-link 呈现的a链接、没有使用a标签是为了可以在不重新加载页面的情况下更改url
2：router-view 路由匹配的渲染结果、匹配对应的组件
3：跳转和a链接href的区别？ 是否刷新页面跳转
6：具体使用方法？
1：新建路由文件router.js 创建路由实例 然后在routes配置
2：main中引入新建这个路由文件 创建实例完成并在main.js挂载根实例
3：详细配置
main.js
router.js
7：setup函数中怎么访问路由？
1：请调用useRouter或useRoute函数
2：因为setup中没有this的、所以不能直接像vue2中访问this.$router
3：this.$router与createRouter 创建的 router 实例完全相同
4：之前使用this.$router时候、是因为不想每次使用的时候都导入路由
8：query、params的区别？
1：query 类似于get传参、刷新参数不会丢失、name、path都可以使用
2：params：类似于post、地址栏不可见。属性参数会丢失、只能使用
name router.push({ name: 'user', params: { username: '' } })
router.push({ path: '/register', query: { plan: '' } })
//返回的是一个promise、可以让我们等待导航完成之后才知道是成功还是失败
//替换当前位置、区别是不会像 history 添加新记录
router.replace(...) router.push、router.replace 和 router.go
是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版
它们确实模仿了 window.history 的 API。
9：怎么实现嵌套路由
1：要将组件渲染到这个嵌套的router-view中，我们需要在路由中配置 children 注意，以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。
10：怎么监听路由参数的变化？
1：watch：监听$this.$router
2：路由钩子函数：beforeRouteUpdate(to,from,next)
3：当使用同一个组件的时候、如果只是参数的变化、会被复用、生命周期钩子不会调用。我们需要监听参数的变化来做一些处理当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性
4：route对象是一个响应式对象、所有属性都可以被监听。但是应该避免监听、应该直接监听期望改变的参数
例：比如参数改变获取用户信息
11：重定向
如果用户访问一个地址的时候、会显示别的地址、重定向别的路由
如果从a重定向到b路由
const routes = [{ path: '/a', redirect: '/b' }]
重定向的目标也可以是一个命名的路由
12：导航守卫
1：全局 2：单个路由独享 3：组件级别的
1：全局的：beforeEach、afterEach 区别是：后者只有两个参数，不需要调用next()beforeEach:必须调用next()，导航的状态才会改变。才会执行后面的
2：路由独享守卫beforeEnter 配置路由的地方配置的
3：组件内的：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeavebeforeRouteEnter：
beforeRouteEnter：不能使用this、获取不到组件实例、因为这个时候组件还没有创建
beforeRouteUpdate：路由改变、组件被复用的时候调用、监听url参数变化、可以访问this
beforeRouteLeave：导航离开的时候、不能访问this(可以传一个回调给next来访问组件实例)
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
离开守卫的应用：例如禁止用户还没有保存的时候离开，可以通过next(false)来取消
只是参数的改变不会引起进入离开的导航守卫，需要watch和beforeRouteUpdate组件内导航
13：路由元信息
1：可以将任何信息附加到路由上、例如过渡名称、谁可以访问路由等、可以再meta属性来实现meta: { requiresAuth: true } // 只有经过身份验证的用户才能创建帖子
2：一个路由匹配成功后、会匹配多个路由记录、然后会暴露给$route对象、 需要遍历数组来检查路由记录中的meta字段、也可以使用$route.meta方法 是一个非递归合并所有meta字段
router.beforeEach((to, from) => {// 而不是去检查每条路由记录
// to.matched.some(record => record.meta.requiresAuth)
if (to.meta.requiresAuth && !auth.isLoggedIn()) {
// 此路由需要授权，请检查是否已登录 如果没有，则重定向到登录页面
return {
path: '/login',
query: { redirect: to.fullPath }, // 保存我们所在的位置，以便以后再来
}
}
})
14：路由懒加载
1：被访问的时候才加载对应的组件
2：vue-router支持动态导入、代替静态导入
3：实现方法 动态导入、代替静态导入 箭头函数为异步组件
4：怎么判断有没有配置好路由懒加载
打包完成看生产的js文件多少
路由懒加载打包完成
5：component 配置接收一个返回 Promise 组件的函数、只会在第一次进入页面的时候才会获取这个函数、 然后使用缓存数据、这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise 一般来说，对所有的路由都使用动态导入是个好主意。 不要在路由中使用异步组件。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。
6：把组件按组分块 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中
15：动态路由
1：动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()
2：应用：实现路由权限
3：前端做的路由权限，判断用户可以看到哪些页面，那些按钮
4：后端权限是进入到了这个页面，可不可以提交这个内容等
5：实现思路：
1：创建实例的时候、我们挂在的路由是一项不需要用户权限的公共页面：登录、注册、首页
2：登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由 meta:来标识页面能访问的权限有哪些，这里是admin和超级管理员才可以 总结：获取用户的roleId，然后根据这个id去匹配我们写的路由文件。再通过roter.addRouter动态的挂载路由。
3：如果是按钮权限可以写一个自定义指令、然后判断我们这个按钮的值，在后端返回的按钮数组里有没有
4：接口权限 可以在axios中拦截、返回的状态吗
5：main.js router.beforeEach if(判断有没有token、没有则去登录页){
1：判断当前用户有没有拉取用户表、没有去vuex中拉取
2：有权限的时候 next() 说明可访问的路由已经生成了、可以去访问了 }else{ 没有token的时候也可以设置一下免登录白名单
16：路由有几种模式？
1：2种中 hash、history
2：hash模式
带#号、#后面的地址不会请求服务器、兼容性好、类似于锚点、不美观有体积限制、createWebHashHistory()创建的 原理：onhashChange事件在页面hash值发生变化时候、无需向后端发送请求。window就可以监听事件的变化、并加载相应的代码 hash值变化对应的url会被浏览器记住、这样就可以实现前进后退。
3：HTML5模式
没有#号、url变更时发送的服务器http请求、借助了history.pushState实现了页面的无刷新跳转 原理：基于history.pushState、replaceState createWebHistory()创建
4：为啥history一刷新页面会报404？
url的改变，会发送http请求，后端没有找到这个地址对应的页面，需要后端配置、找不到就返回首页。
17：滚动位置
const router = createRouter({
history: createWebHashHistory(),
routes: [],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
return { top: 0 }
}
})
1：切换路由时候、想要滚动到页面最底部、或者保持到原先的位置scrollBehavior
2：注意: 这个功能只在支持 history.pushState 的浏览器中可用
18：过渡动效
19：与vue2中路由的改变不同
1：new Router 变成 createRouter 不再是一个类，而是一组函数。现在你不用再写 new Router()，而是要调用 createRouter:
2：新的 history 配置取代 mode、然后根据不同的模式调用不同的函数
"history": createWebHistory()
"hash": createWebHashHistory()
"abstract": createMemoryHistory()
3：将 onReady 改为 isReady
现有的 router.onReady() 函数已被 router.isReady() 取代，
该函数不接受任何参数并返回一个 Promise
// 将 router.onReady(onSuccess, onError)
// 替换成 router.isReady().then(onSuccess).catch(onError)
// 或者使用 await:
try { // 成功
await router.isReady()
} catch (err) { // 报错
}
4：transition和keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用
5：删除