Vue Router(v4.x) 入门指南 |
您所在的位置：网站首页 › 地下城伤害字体 › Vue Router(v4.x) 入门指南 |
|
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括： 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 CSS 类的链接 HTML5 history 模式或 hash 模式 可定制的滚动行为 URL 的正确编码 第一章 入门router 路由，因为vue是单页应用不会有那么多html让我们跳转所以要使用路由做页面的跳转，Vue 路由允许我们通过不同的 URL 访问不同的内容，通过 Vue 可以实现多视图的单页Web应用。 构建前端项目 npm init vue@latest //或者 npm init vite@latest安装vue-router // 目前默认版本是4.x版本 yarn add vue-router在src目录下面新建router文件夹，然后在router文件夹下面新建index.js //引入路由对象 import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory, RouteRecordRaw } from 'vue-router' //vue2 mode history => vue3 createWebHistory //vue2 mode hash => vue3 createWebHashHistory //vue2 mode abstact => vue3 createMemoryHistory // 定义一些路由 // 每个路由都需要映射到一个组件。 const routes: Array = [{ path: '/', component: () => import('../components/a.vue') },{ path: '/b', component: () => import('../components/b.vue') }] const router = createRouter({ history: createWebHistory(), routes }) //导出router export default router router-link请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。 router-viewrouter-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。 只会番茄炒蛋 跳转a 跳转b最后在main.js挂载 import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App) .use(router) .mount('#app') 第二章 命名路由 or 编程式导航 命名路由除了path之外，还可以为任何路由提供name。这有以下几点优势： 没有硬编码的 URL params 的自动编码/解码。 防止你在 url 中出现打字错误。 绕过路径排序（如显示一个） const routes = [ { path: '/', name: 'A', component: () => import('../components/a.vue') }, { path: '/b', name: 'B', component: () => import('../components/b.vue') }, ]router-link跳转的方式可以变更对象 只会番茄炒蛋 跳转a 跳转b 编程式导航除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 字符串模式 import { useRouter } from 'vue-router' const router = useRouter() const navigateTo = () => { router.push('/') } 对象模式 import { useRouter } from 'vue-router' const router = useRouter() const navigateTo = () => { router.push({ path: '/' }) } 命名路由模式 import { useRouter } from 'vue-router' const router = useRouter() const navigateTo = () => { router.push({ name: 'A' }) } a标签跳转直接通过a href也可以跳转, 但是会刷新页面 a标签跳转 第三章 历史记录replace的使用 采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中不会重复保存记录，而是替换原有的vue组件； router-link 的使用方式 跳转a 跳转b 编程式导航 import { useRouter } from 'vue-router' const router = useRouter() const redirectTo = () => { router.replace({ name: 'A' }) } 横跨历史该方法采用了一个整数作为参数，表示在历史堆栈中前进或后头多少步 import { useRouter } from 'vue-router' const router = useRouter() const navigateTo = () => { // 前进，数量不限于1 // router.go(1) // 后退，数量不限于1 // router.go(-1) // 后退 router.back() } 第四章 路由传参 query路由传参编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query属性 import { useRouter } from 'vue-router' const Router = useRouter() const navigateTo = () => { Router.push({ name: 'A', query: { name: '只会番茄炒蛋', age: 18 } }) }接受参数使用 useRoute 中的query import { useRoute } from 'vue-router' const route = useRoute() 名字：{{route.query.name}} 年龄：{{route.query.age}} 动态路由传参很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数 const routes = [ { path: '/user/:id', // 动态字段以冒号开始 name: 'User', component: () => import('../components/user.vue') } ]现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。 路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。 import { useRoute } from 'vue-router' const route = useRoute() console.log(route.params)二者的区别 query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效 query 在路由配置不需要设置参数，而 params 必须设置 query 传递的参数会显示在地址栏中 params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ; 路由配置 第五章 嵌套路由一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构。 const routes = [ { path: '/user', name: 'User', component: () => import('../components/user.vue'), children: [{ path: 'man', name: 'Man', component: () => import('../components/man.vue') }, { path: 'woman', name: 'WoMan', component: () => import('../components/woman.vue') }] }, ]如你所见，children 配置只是另一个路由数组，就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图。 ! 不要忘记在嵌套路由的页面增加router-view 第六章 命名视图命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s) import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' const routes = [ { path: "/", components: { default: () => import('../components/layout/menu.vue'), header: () => import('../components/layout/header.vue'), content: () => import('../components/layout/content.vue'), } }, ] const router = createRouter({ history: createWebHistory(), routes }) export default router对应router-view 通过name 对应组件 第七章 重定向 or 别名 重定向 字符串形式配置当访问/user 会重定向到 /user/man const routes = [ { path: '/user', name: 'User', redirect: '/user/man', component: () => import('../components/user.vue'), children: [{ path: 'man', name: 'Man', component: () => import('../components/man.vue') }, { path: 'woman', name: 'WoMan', component: () => import('../components/woman.vue') }] }, ] 对象形式配置 const routes = [ { path: '/user', name: 'User', redirect: { path: '/user/man' }, component: () => import('../components/user.vue'), children: [{ path: 'man', name: 'Man', component: () => import('../components/man.vue') }, { path: 'woman', name: 'WoMan', component: () => import('../components/woman.vue') }] }, ] 函数形式（可以传递参数） const routes = [ { path: '/user', name: 'User', redirect: (to) => { return { path: '/user/man', query: to.query } }, component: () => import('../components/user.vue'), children: [{ path: 'man', name: 'Man', component: () => import('../components/man.vue') }, { path: 'woman', name: 'WoMan', component: () => import('../components/woman.vue') }] }, ] 别名别名，意味着当用户访问别名和访问当前路径显示的组件是一样的。 const routes = [ { path: '/user', name: 'User', alias: ['/user1', '/user2'], redirect: (to) => { return { path: '/user/man', query: to.query } }, component: () => import('../components/user.vue'), children: [{ path: 'man', name: 'Man', component: () => import('../components/man.vue') }, { path: 'woman', name: 'WoMan', component: () => import('../components/woman.vue') }] }, ] 第八章 导航首位 全局前置守卫 router.beforeEach((to, form, next) => { console.log(to, form); next() })每个守卫方法接收三个参数： to: Route， 即将要进入的目标 路由对象； from: Route，当前导航正要离开的路由； next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。 next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。 next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。使用案例 import NProgress from 'nprogress' import 'nprogress/nprogress.css' const whileList = ['/'] router.beforeEach((to, from, next) => { NProgress.start() let token = localStorage.getItem('token') //白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面 if (whileList.includes(to.path) || token) { next() } else { next({ path:'/login' }) } }) 全局后置守卫和前置守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身： 使用场景一般是路由跳转结束取消loading动画 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.afterEach((to,from)=>{ NProgress.done() }) 第九章 路由元信息通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据例如： 权限校验标识。 路由组件的过渡名称。 路由组件持久化缓存 (keep-alive) 的相关配置。 标题名称 const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: () => import('@/views/Login.vue'), meta: { title: "登录", icon: "round" } }, { path: '/index', component: () => import('@/views/Index.vue'), meta: { title: "首页", icon: "eyes" } } ] }) 第十章 路由的滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。 当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法 scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。 const router = createRouter({ history: createWebHistory(), scrollBehavior: (to, from, savePosition) => { if (savePosition) { return savePosition } else { return { top: 0 } } } }) 第十一章 动态路由对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。 添加路由动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。我们来看一个例子： 想象一下，只有一个路由的以下路由： const router = createRouter({ history: createWebHistory(), routes: [{ path: '/:articleName', component: Article }], })进入任何页面，/about，/store，或者 /3-tricks-to-improve-your-routing-code 最终都会呈现 Article 组件。如果我们在 /about 上添加一个新的路由： router.addRoute({ path: '/about', component: About })页面仍然会显示 Article 组件，我们需要手动调用 router.replace() 来改变当前的位置，并覆盖我们原来的位置（而不是添加一个新的路由，最后在我们的历史中两次出现在同一个位置）： router.addRoute({ path: '/about', component: About }) // 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中） router.replace(router.currentRoute.value.fullPath)记住，如果你需要等待新的路由显示，可以使用 await router.replace()。 删除路由有几个不同的方法来删除现有的路由： 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由： router.addRoute({ path: '/about', name: 'about', component: About }) // 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的 router.addRoute({ path: '/other', name: 'about', component: Other }) 通过调用 router.addRoute() 返回的回调： const removeRoute = router.addRoute(routeRecord) removeRoute() // 删除路由如果存在的话当路由没有名称时，这很有用。 通过使用 router.removeRoute() 按名称删除路由： router.addRoute({ path: '/about', name: 'about', component: About }) // 删除路由 router.removeRoute('about')需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 Symbol 作为名字。 当路由被删除时，所有的别名和子路由也会被同时删除 添加嵌套路由要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样： router.addRoute({ name: 'admin', path: '/admin', component: Admin }) router.addRoute('admin', { path: 'settings', component: AdminSettings })这等效于： router.addRoute({ name: 'admin', path: '/admin', component: Admin, children: [{ path: 'settings', component: AdminSettings }], }) 查看现有路由Vue Router 提供了两个功能来查看现有的路由： router.hasRoute()：检查路由是否存在。 router.getRoutes()：获取一个包含所有路由记录的数组。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |