vue3中怎么使用路由？与vue2路由的区别？vue-router方法总结大全 _生活知道

1：什么是路由？
1：组件和url路径的映射关系。
2：前端最初是一个地址对应的一个页面，地址改变整个页面刷新、页面改变就是组件的切换、后面有了ajax，实现了局部刷新。
3：单页面：不刷新页面的情况下局部更新。缺点：首次加载太多，初次进入慢。
2：什么是前端路由？什么是前端渲染？
后端返回的是json数据，前端根据数据去构建html页面、后端渲染直接返回的是html页面
3：路由实现思路？
拦截不让跳转、监听url变化展示对应的组件、前端维护路由规则
4：安装方法？
npm install vue-router@4yarn add vue-router@4
5：怎么使用？
Go to Home
1：router-link 呈现的a链接、没有使用a标签是为了可以在不重新加载页面的情况下更改url
2：router-view 路由匹配的渲染结果、匹配对应的组件
3：跳转和a链接href的区别？是否刷新页面跳转
6：具体使用方法？
1：新建路由文件router.js 创建路由实例然后在routes配置
2：main中引入新建这个路由文件创建实例完成并在main.js挂载根实例
3：详细配置
main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'const app = createApp(App)app.use(router)app.mount('#app')
router.jsimport { 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、地址栏不可见。属性参数会丢失、只能使用
【vue3中怎么使用路由？与vue2路由的区别？vue-router方法总结大全】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 = https://www.30zx.com/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的时候只挂载constantRouterexport 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？
本文到此结束，希望对大家有所帮助！

vue3中怎么使用路由？与vue2路由的区别？vue-router方法总结大全

猜你喜欢