【Vue】Vue-route路由

这篇具有很好参考价值的文章主要介绍了【Vue】Vue-route路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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 navigation
    return 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-link
    v-else
    v-bind="$props"
    custom
    v-slot="{ isActive, href, navigate }"
  >
    <a
      v-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文章来源地址https://www.toymoban.com/news/detail-420831.html

import { RouterLink, useLink } from 'vue-router'

export default {
  name: 'AppLink',

  props: {
    // 如果使用 TypeScript,请添加 @ts-ignore
    ...RouterLink.props,
    inactiveClass: String,
  },

  setup(props) {
    // `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop
    const { navigate, href, route, isActive, isExactActive } = useLink(props)

    // profit!

    return { isExternalLink }
  },
}
<template>
  <AppLink
    v-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>

到了这里,关于【Vue】Vue-route路由的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue-Router】路由入门

    路由(Routing)是指确定网站或应用程序中特定页面的方式。在Web开发中,路由用于根据URL的不同部分来确定应用程序中应该显示哪个内容。 构建前端项目 安装依赖和路由 3. router 使用 login.vue reg.vue index.ts App.vue main.ts router-view 补充: router-view 是Vue Router提供的一个组件,用于

    2024年02月13日
    浏览(39)
  • vue-router路由守卫

    在我们使用vue-router的时候,路由守卫就像监听器、拦截器一样,帮我们做一些鉴权等操作,vue中的路由守卫分为全局路由守卫、独享路由守卫、组件内的路由守卫 全局路由守卫 : beforeEach、 afterEach 组件独享路由守卫 :beforeEnter、 beforeLeave 组件内路由守卫 :beforeRouteEnter、

    2024年02月11日
    浏览(38)
  • router.addRoute()报错 Uncaught Error: [vue-router] “path” is required in a route configuration

    后端动态传递路由,前端通过router.addRoute()添加时报错。Uncaught Error: [vue-router] “path” is required in a route configuration(未捕获错误:[vue-router]:\\\"路径\\\"在路由配置中是必需的) 查看官方的接口文档:Vue Router _addRoute接口,等于说 addRoute() 实际接收的是一个类型为 RouteRecordRaw

    2024年02月11日
    浏览(67)
  • vue-router路由模式详解

    目录 一. vue-router(前端路由)有两种模式,hash模式和history模式 二、路由模式解析 三、两种模式的区别 1、hash模式  2、history路由 (3)popstate实现history路由拦截,监听页面返回事件 一. vue-router(前端路由)有两种模式,hash模式和history模式 1.hash 就是指 url 后面的 # 号以及后

    2024年02月03日
    浏览(71)
  • vue-router(路由)详细教程

    路由是一个比较广义和抽象的概念,路由的本质就是 对应关系 。 在开发中,路由分为: ​ 后端路由 ​ 前端路由 后端路由 概念:根据不同的用户 URL 请求,返回不同的内容 本质:URL 请求地址与服务器资源之间的对应关系 [外链图片转存失败,源站可能有防盗链机制,建议将

    2024年02月04日
    浏览(77)
  • 【Vue-Router】路由传参

    list.json login.vue reg.vue App.vue index.ts reg.vue item?.name ,item?.price ,item?.id ,他们如果不使用可选链操作符会出现报错: \\\'__VLS_ctx.item\\\' is possibly \\\'undefined\\\'. login.vue 注意: 传递 params 参数时,若使用 to 的对象写法,必须使用 name 配置项,不能用 path 。 传递 params 参数时,需要提前在规

    2024年02月13日
    浏览(39)
  • vue-router路由懒加载

    路由懒加载指的是打包部署时将资源按照对应的页面进行划分,需要的时候加载对应的页面资源,而不是把所有的页面资源打包部署到一块。避免不必要资源加载。(参考vue项目实现路由按需加载(路由懒加载)的3种方式_小胖梅的博客-CSDN博客_vue懒加载 ) 这里有三种方式可以

    2023年04月08日
    浏览(42)
  • Vue3配置路由(vue-router)

    紧接上篇文章,vue3的配置与vue2是有所差别的,本文就讲述了如何配置,如果本文对你有所帮助请三连支持博主。 下面案例可供参考 使用npm命令进行安装 : npm install vue-router@4 完成后我们打开项目根目录下的 package.json 文件: 如下即为成功 这里创建 view目录,然后在view目录

    2023年04月12日
    浏览(61)
  • vue-router 路由元信息meta

    meta原信息是一个可以给路由记录携带一个对象的字段(字段名只能为meta,其他的设置了也没用),你可以在这个字段里存一些信息,例如该路由地址是否需要身份验证、该地址是否需要导航栏等。 获取方式如下: vue-router官方例子如下,是一个根据meta判断该路径是否需要验

    2024年02月13日
    浏览(34)
  • vue3使用vue-router嵌套路由(多级路由)

    Vue3 嵌套路由的使用和 Vue2 相差不大,主要的区别是 Vue3 的路由实例化使用了 createApp() 方法,所以实例化路由时需要传入根组件。另外,Vue3 的路由对象除了包含 Vue2 中的导航守卫、导航钩子和解析守卫等功能外,还新增了 meta prop 和 route prop。 在使用嵌套路由时,建议将路由

    2024年02月03日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包