Vue 3 路由机制详解与实践

已于 2024-05-15 20:35:23 修改
阅读量520 收藏 7
点赞数 3
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2024-04-22 20:33:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsz1805355272/article/details/138039869
版权
本文详细介绍了Vue路由的基础概念，包括路由的切换效果、工作模式（history和hash）、路由的两种写法、命名路由、嵌套路由、参数传递（query和params）、props配置、replace属性以及编程式导航和路由重定向的应用。
摘要由CSDN通过智能技术生成

一、路由的理解

路由是指导用户界面导航的一种机制。它通过映射 URL 到应用程序的不同视图组件来实现页面间的切换和导航。

二、路由基本切换效果

路由基本切换效果指的是当用户在应用程序中进行页面导航时，通过路由可以实现页面的切换，从而展示不同的视图组件。

VUE文件

<template>
  <h1 class="title">Vue路由测试</h1>
  <div class="actives">
    <RouterLink to="/home" active-class="activeclass" class="active"  tag="button">首页</RouterLink>
    <RouterLink to="/home" tag="button" class="button-link">码农</RouterLink>
    <RouterLink :to="{ path: '/news' }" active-class="activeclass" class="active">新闻</RouterLink>
    <RouterLink :to="{ name: '关于' }" active-class="activeclass" class="active">关于</RouterLink>
  </div>
  <div class="routerbox">
    <RouterView></RouterView>
  </div>
</template>

<script lang="ts" setup name="Person">
import { RouterLink, RouterView } from 'vue-router'
import { ref, reactive, watch, onMounted } from 'vue';
</script>
</script>
<style lang='scss' scoped>
h1 {
  text-align: center;
}

.actives {
  display: flex;
  justify-content: space-evenly;
  .button-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
  }
  .active {
    background-color: #808080;
    color: #fff;
    text-decoration: none;
    width: 100px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }

  .active:hover {
    background-color: #354139;
    color: #ECC980;
  }

  .activeclass {
    background-color: #354139;
    color: #ECC980;
    text-decoration: none;
    width: 100px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }
}

.routerbox {
  margin: 0 auto;
  margin-top: 20px;
  width: 80%;
  height: 200px;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 20px;
}
</style>

router.ts文件

// 创建一个路由器，并暴露出去
//第一步:引入createRouter
import { createRouter, createWebHistory } from 'vue-router'

//引入一个一个要呈现组件
import Home from '@/views/Home.vue'
import News from '@/views/News.vue'
import About from '@/views/About.vue'

// 第二步:创建路由器
const router = createRouter({
  history: createWebHistory(),//路由器的工作模式
  routes: [//一个一个的路由规则
    {// 将默认路由重定向到 '/home'
      path: '/',
      name: '首页',
      redirect: '/home'
    },
    {
      path: '/home',
      name: '首页',
      component: Home
    },
    {
      path: '/news',
      name: '新闻',
      component: News
    },
    {
      path: '/about',
      name: '关于',
      component: About
    }
  ]
})

export default router

main.ts

//引入createApp用于创建应用
import { createApp } from 'vue'
//引入App根组件
import App from './App.vue'
// 引入路由器
import router from './route/route'

//创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount('#app')

在这里插入图片描述

三、路由的两个注意点

1.路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
2.通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

四、路由器工作模式

1.history模式

优点:

  • URL 更加美观,不带有 #,更接近传统网站 URL
  • 利于 SEO 优化

缺点:

  • 后期项目上线,需要服务端配合处理路径问题,否则刷新会有 404 错误
const router = createRouter({
	history:createWebHistory(), //history模式

})

网址显示：http://localhost:5173/home

  1. hash模式

优点:

  • 无需服务端配合,即可运行
  • 兼容性更好

缺点:

  • URL 带有 #,不太美观
  • 对 SEO 优化相对较差
const router = createRouter({
	history:createWebHashHistory(), //hash模式

})

网址显示：http://localhost:5173/#/home

⭐不同点在于有无/#

五、路由 to 的两种写法

在 Vue 3 + TypeScript 中，可以使用对象字面量或者字符串形式来指定 to 属性。

对象字面量：to="{ name: 'Home' }"
字符串形式：to="/home"

六、路由命名路由

命名路由是指为特定路由指定一个名称，以便在代码中引用。这样做有助于在应用程序中进行路由导航时更清晰地指定目标路由。

// 创建路由器
const router = createRouter({
  history: createWebHistory(),//路由器的工作模式
  routes: [//一个一个的路由规则
    {// 将默认路由重定向到 '/home'
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: '首页',
      component: Home
    },
    {
      path: '/news',
      name: '新闻',
      component: News
    },
    {
      path: '/about',
      name: '关于',
      component: About
    }
  ]
})
export default router

七、路由嵌套路由

路由嵌套是指在一个路由下定义子路由，通过这种方式可以构建复杂的页面结构和导航层次。

  1. 编写News的子路由：Detail.vue
  2. 配置路由规则，使用children配置项：
const router = createRouter({
  history: createWebHistory(),//路由器的工作模式
  routes: [//一个一个的路由规则
    {
      path: '/news',
      name: '新闻',
      component: '@/views/News.vue',
      children: [
        {
          path: '/detal',
          component: '@/views/detal.vue'
        }
      ]
    }
  ]
})
export default router
  1. 跳转
<li v-for="item in newsList" :key="item.id">
	<RouterLink to="/news/detal" :active-data="item">{{ item.title }}</RouterLink>
</li>
  1. 记得去news组件中预留一个<router-view>
<template>
  <div class="flex">
    <div class="news">
      <ul>
        <li v-for="item in newsList" :key="item.id">
          <RouterLink to="/news/detal">{{ item.title }}</RouterLink>
        </li>
      </ul>
    </div>
    <div class="router-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script setup lang="ts" name="News">
import { ref, reactive, watch, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router';
const newsList = ref([
  { id: 1, title: '标题1', content: '内容1' },
  { id: 2, title: '标题2', content: '内容2' },
  { id: 3, title: '标题3', content: '内容3' },
  { id: 4, title: '标题4', content: '内容4' },
  { id: 5, title: '标题5', content: '内容5' },
])
</script>
<style lang='scss' scoped>
.flex {
  display: flex;
  justify-content: flex-start;

  .news {
    ul {
      margin: 0;
      padding: 0 10px 0 0;

      li {
        list-style-type: none;

        a {
          text-decoration: none;
        }
      }
    }
  }

  .router-content {
    width: 80%;
    border-radius: 10px;
    padding: 5px;
    border: #000 solid 1px;
  }
}
</style>

八、路由传参

  1. 路由 query 参数
    Query 参数是指在 URL 中以 ? 开头的参数，用于传递额外的信息给路由目标组件。在 Vue 3 + TypeScript 中，可以通过 $route.query 来获取这些参数。

1.query参数

（1）传递参数

<!-- 方式一：跳转并携带query参数（to的字符串写法） -->
<RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}
</RouterLink>
				
<!-- 方式二：跳转并携带query参数（to的对象写法） -->
<RouterLink :to="{
 path: '/news/detail',
 query: {
  id: item.id,
  title: item.title,
  content: item.content
 }
}">{{ item.title }}</RouterLink>

（2）接收参数：

import { ref, watchEffect, toRefs } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let { query } = toRefs(route)

（3）路由配置


const router = createRouter({
 history: createWebHistory(),//路由器的工作模式
 routes: [
  {
   path: '/news',
   name: '新闻',
   component: News,
   children: [
    {
	 name:'detail',
	 path: '/news/detail',
	 component: Detal
	}
  ]
 }
])

export default router

2.params参数

Params 参数是指在 URL 中使用动态路由参数的一种方式，通过这种方式可以在路由之间传递数据。在 Vue 3 + TypeScript 中，可以通过 $route.params 来获取这些参数。

（1）传递参数

<!-- 第一种方法 -->
<RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink>

<!-- 第二种方法 -->
<RouterLink 
 :to="{
  name: 'detail',
  params: {
   id: item.id,
   title: item.title,
   content: item.content,
  }
}">{{ item.title }}</RouterLink>

（2）接收参数

import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let { params } = toRefs(route)
console.log(params.value);

（3）路由配置

const router = createRouter({
 history: createWebHistory(),//路由器的工作模式
 routes: [
  {
   path: '/news',
   name: '新闻',
   component: News,
   children: [
    {
	 name:'detail',
	 path: '/news/detail/:id/:title/:content?',//id和title参数是必须的，但content参数可以省略
	 component: Detal
	}
  ]
 }
])

export default router

注意：

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
备注2：传递params参数时，需要提前在规则中占位。

九、路由 props 配置

让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

（1）传递参数

const router = createRouter({
 history: createWebHistory(),//路由器的工作模式
 routes: [//一个一个的路由规则
  {
   path: '/news',
   name: '新闻',
   component: News,
   children: [
    {
     name:'xiang',
     path:'detail/:id/:title/:content',
     component:Detail,​  
     // ⭐⭐第一种写法:将路由收到的所有params参数作为props传给路由组件
     props: true,
     
     // ⭐⭐第二种写法:函数写法，可以自己决定将什么作为props给路由组件
     props(route) {
      return route.query
     }

     // 第三种写法（几乎用不到）:对象写法，可以自己决定将什么作为props给路由组件
     props :{
     id:1,
     title:'标题',
     content:'内容'
    }
   ]
  }
 ]
})
export default router

等同于 <Detail :id="1" :title="标题" :content="内容" /> 这样的 prop传值

（2）接收参数

<template>
 <div>
  编号：{{ id }}
  标题：{{ title }}
  内容：{{ content }}
 </div>
</template>

<script lang="ts" setup name="Person">
 defineProps(['id','title','content',])
</script>

十、路由 replace 属性

replace 属性是指在导航时替换当前路由历史记录而不是添加新记录。在某些情况下，使用 replace 可以更好地管理路由历史。

  1. 作用：控制路由跳转时操作浏览器历史记录的模式。
  2. 浏览器的历史记录有两种写入方式：分别为push和replace：
  • push是追加历史记录（默认值）。
  • replace是替换当前记录。
  1. 开启replace模式路由跳转时加了replace的路由，导航就不会留下历史记录
<RouterLink replace .......>News</RouterLink>

十一、路由编程式路由导航

编程式路由导航是指通过 JavaScript 代码来进行页面导航，可以在组件方法中使用 $router 对象来实现。

<template>
  <div>
    <button @click="navGetTo()">点我跳转新闻页</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { useRouter } from 'vue-router';
const router = useRouter()

function navGetTo() {
 router.push('/news')
}
</script>

应用场景：

符合条件跳转，登陆成功跳转个人主页、整点秒杀跳转鼠标滑过跳转等等

十二、路由重定向

路由重定向是指当用户访问某个特定路径时自动将其重定向到另一个路径，通常用于处理用户访问的旧路径或者错误路径。

 {
 // 将默认路由重定向到 '/home'
  path: '/',
  redirect: '/home'
 }
俎树振
关注
专栏目录
「Vue3系列」Vue3 路由
日常笔记/总结/系列知识梳理
03-06 1280
路由元信息（Route Meta）允许你在路由配置中定义一些自定义信息，这些信息可以在路由守卫（Navigation Guards）或其他地方使用。Vue Router 提供了许多高级功能，包括路由元信息配置、嵌套路由和动态路由匹配。嵌套路由允许你创建一个多级导航结构，你可以在一个路由内部定义子路由。动态路由匹配允许你定义可变的 URL 部分，用于匹配不同的参数。提供了一些属性来定制链接的行为和外观。事件，并阻止其默认行为（即阻止页面跳转），除非。默认的标签，如果指定了的话）。在 Vue 3 中，
详解Vue路由自动注入实践
10-17
Vue路由自动注入是一种简化Vue应用路由配置的方法，它允许开发者基于文件系统结构自动创建路由配置，从而避免在`router.js`文件中手动编写路由代码。这个功能来源于Nuxt.js框架，但在这里被独立成一个Webpack插件，...
Vue3-路由详解
A的博客
05-31 3830
让路由组件更方便的收到参数（可以将路由参数作为。优点：兼容性更好，因为不需要服务器端处理路径。作用：可以简化路由跳转及传参（后面就讲）。参数时，需要提前在规则中占位。的对象写法，必须使用。
Vue 3中的路由（Router）详解
最新发布
2301_79155654的博客
09-27 1367
路由其实就是URL与应用程序视图之间的映射关系。在传统的多页应用里面，每次跳转都是向服务器发送请求，服务器返回新的页面的过程。但是在SPA中，页面并不会刷新，而是根据URL的变化，动态地 加载相应的组件，为实现这一效果，就需要路由系统的管理。在components目录下创建Home.vue和About.vue。
vue3路由（基本用法、路由守卫、动态路由）
m0_68716504的博客
07-08 2558
这里做法是使用isReady方法，它返回一个 Promise，它会在路由器完成初始导航之后被解析，也就是说这时所有和初始路由有关联的异步入口钩子和异步组件都已经被解析。route中有一个配置项是meta，专门提供给我们，在meta项中配置自己的属性与值，可用于在守卫中的权限判断。注：这里只说编程式路由导航，(不说<router-link>，项目中基本不用，也没法写逻辑)直接在需要设置权限的路由配置中写代码，代码逻辑和全局前置路由一模一样。三种分类：全局守卫、单个路由守卫、组件内部守卫。
VUE3浅析---路由
qq_22610595的博客
06-15 1375
vue3中的路由
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
Vue 解决路由过渡动画抖动问题(实例详解)
10-15
在开发使用Vue.js框架的单页面应用（SPA）时，路由过渡动画是提升用户体验的重要方面之一。然而，在实现过渡动画时，可能会遇到页面抖动的问题，这会破坏用户体验。本文详细介绍了如何解决Vue在路由过渡过程中出现的...
详解vue嵌套路由-query传递参数
08-30
"详解vue嵌套路由-query传递参数" 在前端开发中，路由机制是不可或缺的一部分，而在 Vue 中，我们可以使用 Vue Router 来实现客户端路由。今天，我们将详细介绍如何在 Vue 嵌套路由中传递参数，特别是使用 query 来...
vue3路由
ldd_eb的博客
07-29 1865
2.路由组件：靠路由规则渲染出来的。1.路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。1.引入创建路由器并暴露，引入可能用到的路由组件 router/index.ts。history:createWebHistory(), //history模式。缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。优点：URL更加美观，不带有#，更接近传统的网站URL。作用：控制路由跳转时操作浏览器历史记录的模式。3.一般组件：亲手写出来的标签。
Vue3 - 路由
qq_49523975的博客
02-24 1337
四、Vue中的ajax 4.1 vue脚手架配置代理 解决开发环境Ajax跨域问题 Vue CLI文档 方法一 ​ 在vue.config.js中添加如下配置： devServer:{ proxy:"http://localhost:5000" //配置代理服务器，这个路径端口号要与传送数据的服务器端口号一致 } 复制代码 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理。不能灵活的控制请求是否走代理，这会告诉开发服务器将任何未知请求 (没有匹配到静态文件
Vue路由高级用法
bestkasscn的博客
12-22 812
vue-router的高级用法 路由重定向 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向 const router = createRouter({ history:createWebHashHistory(), routes:[ {path:'/',redirect:'/home'} {path:'/home',component:MyHo
vue3使用路由
weixin_69318049的博客
11-25 917
vue3的路由基本使用
vue3中使用路由
m0_74331185的博客
04-14 1482
配置一级路由，使用routerView 做路由出口。需要在一级路由界面下 配置二级路由出口。vue3 使用的是setup简写组件。使用vuerouter的组合式api。vue3 组件为vue2组件写法。项目守卫检测用户是否登录。路由配置非路由重定向。
Vue3配置路由
weixin_45914938的博客
06-19 576
学路由的时候建的是Vue2项目，刚做了个小项目是Vue3的，和2有点差别，费了一番功夫才搞好，官网上似乎没更新Vue3的写法，网上也没找到比较详细说这个的，就来贴一下。 在配路由这里，Vue2和Vue3的差别就在于Vue3不再使用new Vue这种方式创建实例，而是使用createApp. 貌似在创建路由对象的时候一定要写什么模式，不然没用，就是在这个地方卡了很久。一开始没有设置什么模式，router里只有一个参数route，然后就啥也显示不出来，后来加入了模式就OK了，不知道啥原因，也不报错，网上也说可以
Vue3 使用路由 Router
01-02 4023
众所周知，vue 是用来构建单页面应用的前端框架，大于大多数此类型应用来讲，都推荐使用官方支持的 vue Router，在单页面应用，客户端的 JavaScript 可以连接页面跳转请求，动态获取数据，然后无需重新加载页面的情况下，更新当前页面数据，这样可以带来更加丝滑的用户体验，因为这类场景下的用户通常会在很长的一段时间中做出多次交互，路由是更新在客户端执行的。vue Router是 vue 官方路由，他与 vue 核心深度集成，让 vue 构建单页面应用变得更加轻而易举。嵌套路由映射。
Vue3 中路由的使用
Ljwen_的博客
06-13 3632
Vue3 中路由的创建、路由传参、路由切换页面滚动到顶部
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

俎树振

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值