【Vue】Vue-route路由

news/2024/11/30 9:46:47/

Vue-router官网
由vue-router模块控制，需要额外安装依赖。参考官网

npm install vue-router --save

组成

  • router-link：路由链接，跳转至路由视图，展示指定路由组件信息
  • router-view：路由视图，展示路由组件信息
  • route：路由信息
  • router：路由对象

router-link

路由跳转，类似a标签，路由跳转作用

<router-link to="" />

router-view

路由视图，用于其他组件在该视图位置显示。

<router-view name="name" />
<!-- 可以指定视图名，在路由跳转时可通过视图名指定视图位置跳转路由 -->

route

{path:'/url',name:'name',components:{ // one,two会绑定对应名称的路由视图上<router-view name='name'/>default: ComponentZero,one:ComponentOne,two:ComponentTwo, },meta: { transition: 'slide-right' }, // 路由元信息，可以通过router.meta获取指定元信息component:ComponentZero, //在默认路由视图上跳转redirect:'', // 重定向，也可详细描述route信息{path:'url'}children:[ // 嵌套路由{path:'/url1', // 即/url/url1/的访问component:ComponentOne,},{path:'/url2', // 即/url/url2/的访问component:ComponentTwo,}],beforeEnter:(to, from) => { // 路由守卫，独享// reject the navigationreturn false},
}

router

{history:createWebHashHistory(), // history模式，hash式和非hash式routes:routes,// 绑定路由集strict: true, // 严格区分大小写，也可在单个路由配置sensitive: true, // 不区分大小写，也可在单个路由配置scrollBehavior (to, from, savedPosition) { //滚动行为// return 期望滚动到哪个的位置},
}

匹配规则

  • 自定义正则
  • 可重复参数
  • 大小写敏感控制
  • 可选参数
const routes = [// 匹配 /o/3549{ path: '/o/:orderId' },// 匹配 /p/books{ path: '/p/:productName' },// /:orderId -> 仅匹配数字{ path: '/:orderId(\\d+)' },// /:productName -> 匹配其他任何内容{ path: '/:productName' },// /:chapters ->  匹配 /one, /one/two, /one/two/three, 等,至少有一个参数，否则异常{ path: '/:chapters+' },// /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等{ path: '/:chapters*' },// 匹配 /, /1, /1/2, 等{ path: '/:chapters(\\d+)*' },// 将匹配 /users/posva 而非：// - /users/posva/ 当 strict: true// - /Users/posva 当 sensitive: true{ path: '/users/:id', sensitive: true },// 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/{ path: '/users/:id?' },// 匹配 /users 和 /users/posva{ path: '/users/:userId?' },// 匹配 /users 和 /users/42{ path: '/users/:userId(\\d+)?' },
]

配置&使用

  1. 定义路由组件component
  2. 定义路由集routes
  3. 创建路由实例router
  4. 选择history模式：hash(路径带#)和H5模式
  5. 挂载路由到app根
// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [{ path: '/', component: Home },{ path: '/about', component: About },
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
// VueRouter : import { createRouter, createWebHistory } from 'vue-router'
const router = VueRouter.createRouter({// 4. 内部提供了 history 模式的实现。// hash 模式 createWebHashHistory()// H5模式 createWebHistory();history: VueRouter.createWebHashHistory(),routes, // `routes: routes` 的缩写
})
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
app.mount('#app')

动态路由

  • 路径参数用:冒号修饰的，
  • 参数支持正则表达式匹配，
  • 代表可以传递动态数据到组件中，并且组件也可以读取参数。
  • 通过$router.param.var-name接收var-name变量值
  • 支持多个参数绑定和接收
// 这些都会传递给 `createRouter`
const routes = [// 动态字段以冒号开始{ path: '/users/:id', component: User },
]const User = {template: '<div>User {{ $route.params.id }}</div>',
}

嵌套路由

即由children定义的子路由集。

const routes = [{path: '/user/:id',name: 'user-parent',component: User,children: [{ path: '', name: 'user', component: UserHome }],},
]

导航

  • router-link元素方式
  • router.push编程方式
  • 替换方式：不会向history添加记录
// <router-link :to="...">
// 字符串路径
router.push('/users/eduardo')// 带有路径的对象
router.push({ path: '/users/eduardo' })// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

// <router-link :to="..." replace>
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

命名路由

即配置name属性的路由，导航时可绑定name属性。

const routes = [{path: '/user/:username',name: 'user',component: User,},
]
// <router-link :to="{ name: 'user', params: { username: 'erina' }}"> User </router-link>
router.push({ name: 'user', params: { username: 'erina' } })
// 导航至 /user/erina

命名视图

即带有name属性路由视图，在路由导航时可通过命名在指定视图上导航

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

routes: [{path: '/',components: {default: Home,// LeftSidebar: LeftSidebar 的缩写LeftSidebar,// 它们与 `<router-view>` 上的 `name` 属性匹配RightSidebar,},},],

重定向和别名

  • redirect重定向，分为绝对和相对
  • alias 别名，可以单个，也可以多个
const routes = [{// 将总是把/users/123/posts重定向到/users/123/profile。path: '/users/:id/posts',redirect: to => {// 该函数接收目标路由作为参数// 相对位置不以`/`开头// 或 { path: 'profile'}return 'profile'},},{ path: '/home', redirect: { name: 'homepage' } }, // 绝对重定向{ path: '/user', component: Homepage, alias: ['/people', 'list']  }
]

路由组件传参

  • 若组件需要接收props参数值，则路由配置时需要声明props为true
  • 对于命名视图的路由，则需要针对每个命名视图都要声明props配置
const routes = [{ path: '/user/:id', component: User, props: true },{path: '/users/:id',components: { default: User, sidebar: Sidebar },props: { default: true, sidebar: false }}
]

历史模式

  • hash模式：createWebHashHistory()，路径带#修饰符
  • H5模式：createWebHistory(),推荐使用

路由守卫

  • 全局守卫
    • beforeEach 路由跳转前置处理处理
    • beforeResolve 路由解析，导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用
    • afterEach 路由跳转后置处理，可以分析，修改页面标题等
  • 独享守卫
    • beforeEnter 独享路由守卫，在配置路由时绑定，只在进入对应路由时触发
  • 组件内守卫
    • beforeRouteEnter 组件创建前调用，内部不能使用this
    • beforeRouteUpdate 组件更新时调用，一般对应动态路由时
    • beforeRouteLeave 离开组件时调用
const UserDetails = {template: `...`,beforeRouteEnter(to, from) {// 在渲染该组件的对应路由被验证前调用// 不能获取组件实例 `this` ！// 因为当守卫执行时，组件实例还没被创建！},beforeRouteUpdate(to, from) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`},beforeRouteLeave(to, from) {// 在导航离开渲染该组件的对应路由时调用// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`},
}

路由懒加载

即仅在访问时初始化组件。

{path:'url',component:() => import('./views/UserDetails.vue')}

导航故障

  • 等待导航结果
  • 检测导航故障
  • 鉴别导航故障
    • aborted：导航守卫返回false被阻止
    • cancelled：导航未完成之前又有新导航，如等待导航的过程中有调用了路由导航
    • duplicated:已在目标位置，导航被阻止
  • 检测重定向
// 使用await同步修饰符等待导航结果
const navigationResult = await router.push('/my-profile')import { NavigationFailureType, isNavigationFailure } from 'vue-router'if(isNavigationFailure(failure, NavigationFailureType.aborted)){// 检测导航故障类型
}

动态路由

  • createRouter 创建路由实例
  • addRouter 未路由实例添加新动态路由及嵌套路由
router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })
  • removeRoute 删除路由
    • 通过命名冲突覆盖方式删除旧路由
    • 通过addRouter的回调方式删除
    • 通过路由别名删除
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话// 删除路由
router.removeRoute('about')
  • hasRoute 查看路由是否存在
  • getRoute 获取路由

扩展RouterLink

<template><a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank"><slot /></a><router-linkv-elsev-bind="$props"customv-slot="{ isActive, href, navigate }"><av-bind="$attrs":href="href"@click="navigate":class="isActive ? activeClass : inactiveClass"><slot /></a></router-link>
</template><script>
import { RouterLink } from 'vue-router'export default {name: 'AppLink',inheritAttrs: false,props: {// 如果使用 TypeScript，请添加 @ts-ignore...RouterLink.props,inactiveClass: String,},computed: {isExternalLink() {return typeof this.to === 'string' && this.to.startsWith('http')},},
}
</script>

如果使用渲染函数或创建 computed 属性，你可以使用 Composition API 中的 useLink

import { RouterLink, useLink } from 'vue-router'export default {name: 'AppLink',props: {// 如果使用 TypeScript，请添加 @ts-ignore...RouterLink.props,inactiveClass: String,},setup(props) {// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 propconst { navigate, href, route, isActive, isExactActive } = useLink(props)// profit!return { isExternalLink }},
}

<template><AppLinkv-bind="$attrs"class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out"active-class="border-indigo-500 text-gray-900 focus:border-indigo-700"inactive-class="text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300"><slot /></AppLink>
</template>

http://www.ppmy.cn/news/47566.html

相关文章

SLAM 十四讲（第一版）各章方法总结与理解

SLAM 十四讲（第一版）各章方法总结与理解

SLAM 十四讲&#xff08;第一版&#xff09;各章方法总结与理解 总结十四讲中各章各步骤提到的各种方法&#xff0c;以及具体方法在哪个 c 库中可以调用。目的在于能更直观地了解 slam 过程各步骤到底在做什么&#xff0c;以及是怎么联系在一起的。 2. 初识 SLAM SLAM&#x…
阅读更多...
Redis---测试配置及添加slave主机

Redis---测试配置及添加slave主机

一、测试集群功能 测试高可用 1、停止 master 主机的 redis 服务 master 宕机后对应的 slave 自动被选举为 master&#xff0c;原 master 启动后&#xff0c;会自动配置为当前 master 的 slave 2、检测集群 mgm68管理主机&#xff0c;查看集群信息 主服务器地址和端口(ID值…
阅读更多...
python笔记：datetime

python笔记：datetime

处理日期和时间 1 常量 MINYEAR datetime允许的最小年份 MAXYEAR datetime允许的最大年份 2 数据类型 datetime.date带有属性year,month,daydatetime.time带有属性hour,minute,second,microsecond,tzinfodatetime.datetime带有属性year,month,day,hour,minute,second,…
阅读更多...
22勤于思考：gRPC都有哪些优势和不足？

22勤于思考：gRPC都有哪些优势和不足？

如果你能从专栏的开篇词开始读到这篇文章并且能够在过程中认真思考，那么我相信你目前已经能够对gRPC有了较为充分了解。在专栏的最后几节中，我们抽出一篇文章。来探讨一下gRPC有哪些优势和不足，因为只有这样我们才能取其精华，去其糟粕，学习gRPC框架设计的优点，还能反观出…
阅读更多...
Nacos服务端健康检查-篇五

Nacos服务端健康检查-篇五

Nacos服务端健康检查-篇五 &#x1f550;Nacos 客户端服务注册源码分析-篇一 &#x1f551;Nacos 客户端服务注册源码分析-篇二 &#x1f552;Nacos 客户端服务注册源码分析-篇三 &#x1f553;Nacos 服务端服务注册源码分析-篇四 上篇分析l服务端的注册服务的整个流程&…
阅读更多...
大四的告诫

大四的告诫

&#x1f442; LOCK OUT - $atori Zoom/KALONO - 单曲 - 网易云音乐 &#x1f442; 喝了一口星光酒&#xff08;我只想爱爱爱爱你一万年&#xff09; - 木小雅 - 单曲 - 网易云音乐 其实不是很希望这篇文章火&#xff0c;不然就更卷了。。 从大一开始&#xff0c;每天10小时…
阅读更多...
mysql 事务的 ACID 特征与使用

mysql 事务的 ACID 特征与使用

事务的四大特征&#xff1a; A 原子性&#xff1a;事务是最小的单位&#xff0c;不可以再分割&#xff1b;C 一致性&#xff1a;要求同一事务中的 SQL 语句&#xff0c;必须保证同时成功或者失败&#xff1b;I 隔离性&#xff1a;事务1 和 事务2 之间是具有隔离性的&#xff1…
阅读更多...
【性能测试】5年测试老鸟，总结性能测试基础到指标，进阶性能测试专项......

【性能测试】5年测试老鸟，总结性能测试基础到指标，进阶性能测试专项......

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 性能测试是为了评…
阅读更多...
最新文章

Copyright @ 2022~2023