1：什么是路由？
1：组件和url路径的映射关系。
2：前端最初是一个地址对应的一个页面，地址改变整个页面刷新、页面改变就是组件的切换、后面有了ajax，实现了局部刷新。
3：单页面：不刷新页面的情况下局部更新。缺点：首次加载太多，初次进入慢。
2：什么是前端路由？什么是前端渲染？
后端返回的是json数据，前端根据数据去构建html页面、后端渲染直接返回的是html页面
3：路由实现思路？
拦截不让跳转、监听url变化展示对应的组件、前端维护路由规则
4：安装方法？
npm install vue-router@4yarn add vue-router@45：怎么使用？
Go to Home1：router-link 呈现的a链接、没有使用a标签是为了可以在不重新加载页面的情况下更改url
2：router-view 路由匹配的渲染结果、匹配对应的组件
3：跳转和a链接href的区别？ 是否刷新页面跳转
6：具体使用方法？
1：新建路由文件router.js 创建路由实例 然后在routes配置
2：main中引入新建这个路由文件 创建实例完成并在main.js挂载根实例
3：详细配置
main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app')router.js import { createWebHistory, createRouter } from 'vue-router' export const baseRoutes = [ { path: '/login', component: () => import('@/views/home/login.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes: baseRoutes });7：setup函数中怎么访问路由？
1：请调用useRouter或useRoute函数
2：因为setup中没有this的、所以不能直接像vue2中访问this.$router
3：this.$router与createRouter 创建的 router 实例完全相同
4：之前使用this.$router时候、是因为不想每次使用的时候都导入路由
import { useRouter } from 'vue-router' const router = useRouter() router.push({path: '/home'})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。
const routes = [ { path: '/home', component: home, children: [ {//当 /home/a 匹配成功 a 将被渲染到 User 的 内部 path: 'a', component: a, }, {// 当 /home/b 匹配成功 b 将被渲染到 User 的 内部 path: 'b', component: b, }, ], }, ]10：怎么监听路由参数的变化？
1：watch：监听$this.$router
2：路由钩子函数：beforeRouteUpdate(to,from,next)
3：当使用同一个组件的时候、如果只是参数的变化、会被复用、生命周期钩子不会调用。我们需要监听参数的变化来做一些处理当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性
4：route对象是一个响应式对象、所有属性都可以被监听。但是应该避免监听、应该直接监听期望改变的参数
例：比如参数改变获取用户信息
import { useRoute } from 'vue-router' const userData = ref() import { ref, watch } from 'vue' watch(()=>route.params.id, async newId => { userData.value = await fetchUser(newId) } )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参数变化、可以访问thisbeforeRouteLeave：导航离开的时候、不能访问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：实现方法 动态导入、代替静态导入 箭头函数为异步组件
// 1:静态导入 import a from './views/a.vue' const router = createRouter({ routes: [{ path: '/', component: a }], }) // 2:动态导入 const router = createRouter({ routes: [{ path: '/', component: () => import('./views/a.vue') }], })4：怎么判断有没有配置好路由懒加载
打包完成看生产的js文件多少
路由懒加载打包完成
5：component 配置接收一个返回 Promise 组件的函数、只会在第一次进入页面的时候才会获取这个函数、 然后使用缓存数据、这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise 一般来说接收服务器消息回调url失败，对所有的路由都使用动态导入是个好主意。 不要在路由中使用异步组件。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。
6：把组件按组分块 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中
15：动态路由
1：动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()
2：应用：实现路由权限
3：前端做的路由权限，判断用户可以看到哪些页面接收服务器消息回调url失败，那些按钮
4：后端权限是进入到了这个页面，可不可以提交这个内容等
5：实现思路：
1：创建实例的时候、我们挂在的路由是一项不需要用户权限的公共页面：登录、注册、首页
export const constantRouterMap = [ { path: '/login', component: Login }, ] //实例化vue的时候只挂载constantRouter export default new Router({ routes: constantRouterMap });2：登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由 meta:来标识页面能访问的权限有哪些，这里是admin和超级管理员才可以 总结：获取用户的roleId，然后根据这个id去匹配我们写的路由文件。再通过roter.addRouter动态的挂载路由。
3：如果是按钮权限可以写一个自定义指令、然后判断我们这个按钮的值，在后端返回的按钮数组里有没有
4：接口权限 可以在axios中拦截、返回的状态吗
export const asyncRouterMap = [ { path: '/permission', component: Layout, name: '权限测试', meta: { role: ['admin','super_editor'] }, //页面需要的权限 }, { path: '*', redirect: '/404', hidden: true } //这里有一个需要非常注意的地方就是404页面一定要最后加载一同声明了404，后面的所以页面都会被拦截到404 ]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？
本文到此结束，希望对大家有所帮助！