【Vue3+Vite】路由机制router 快速学习 第四期

文章目录

  • 路由简介
    • 路由是什么
    • 路由的作用
  • 一、路由入门案例
    • 1. 创建项目 导入路由依赖
    • 2. 准备页面和组件
    • 3. 准备路由配置
    • 4. main.js引入router配置
  • 二、路由重定向
  • 三、编程式路由(useRouter)
  • 四、路由传参(useRoute)
  • 五、路由守卫
  • 总结

路由简介

路由是什么

路由就是根据不同的 URL 地址展示不同的内容或页面。
页面切换

路由的作用

  • 单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
  • 路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
  • 路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。

一、路由入门案例

创建路由基本流程：

  • 页面组件准备
  • App主体页 :
    • 定义 路由链接 <router-link to="/">
    • 定义 路由显示位置 <router-view name="homeView">
  • js配置路由：
    • 导入路由vue-router相关依赖 createRouter 和 createWebHashHistory方法
    • 创建路由方法 声明路由规则 createRouter()
      • path:'/'
      • components:{ homeView:Home }
    • 对外暴露router对象变量 给main.js
  • main.js中导入router配置
    • import 路由js
    • 绑定路由对象 app.use(router)

需求分析：
在这里插入图片描述

1. 创建项目 导入路由依赖

npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router@4 --save //安装全局的vue-router 4版本

2. 准备页面和组件

  • components/Home.vue
<script setup>
</script>

<template>
  <div>
    <h1>Home页面</h1>
  </div>
</template>

<style scoped>
</style>
  • components/List.vue
<script setup>
</script>

<template>
  <div>
    <h1>List页面</h1>
  </div>
</template>

<style scoped>
</style>
  • App.vue
<script setup>
</script>

<template>
  <div>
    <h1>App页面</h1>
    <hr />
    <!-- 路由的连接 -->
    <router-link to="/">home页</router-link>
    <br />
    <router-link to="/list">list页</router-link>
    <br />
    <!-- 路由连接对应视图的展示位置 -->
    <hr />默认展示位置:
    <router-view></router-view>
    <hr />Home视图展示:
    <router-view name="homeView"></router-view>
    <hr />List视图展示:
    <router-view name="listView"></router-view>
    <hr />
  </div>
</template>

<style scoped>
</style>

3. 准备路由配置

  • createWebHashHistory() 是 Vue.js 基于 hash 模式创建路由的工厂函数。
  • 在使用这种模式下，路由信息保存在 URL 的 hash 中，
  • 使用 createWebHashHistory() 方法，可以创建一个路由历史记录对象，用于管理应用程序的路由。
  • 在 Vue.js 应用中：
    - 通常使用该方法来创建路由的历史记录对象。
    - 就是路由中缓存历史记录的对象，vue-router 提供
  • src/routers/router.js
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'

// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'

// 创建路由对象,声明路由规则
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            components: {
                default: Home,
                homeView: Home
            }
        },
        {
            path: '/list',
            components: {
                listView: List
            }
        }
    ]
})
// 对外暴露路由对象
export default router;

component 指定组件在默认的路由视图位置展示
components:Home
components指定组件在name为某个值的路由视图位置展示

components:{
	default:Home,// 默认路由视图位置
	homeView:Home// name为homeView的路由视图位置
}

4. main.js引入router配置

import { createApp } from 'vue'

import App from './App.vue'
//导入router模块
import router from './routers/router.js'
let app = createApp(App);
//绑定路由对象!!!
app.use(router);
app.mount('#app')

result

二、路由重定向

重定向的作用：将一个路由重定向到另一个路由上

  • 修改案例：访问/list和/showAll都定向到List.vue
  • router.js
    • 定义routes : /showAll
    • 添加 redirect: '/list'
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'

// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Add from '../components/Add.vue'
import Update from '../components/Update.vue'

// 创建路由对象,声明路由规则
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            components: {
                default: Home,
                homeView: Home
            }
        },
        {
            path: '/list',
            components: {
                listView: List
            }
        },
        {
            path: '/showAll',
            // 重定向
            redirect: '/list'
        },
        {
            path: '/add',
            components: {
                addView: Add
            }
        },
        {
            path: '/update',
            components: {
                updateView: Update
            }
        }
    ]
})
// 对外暴露路由对象
export default router;
  • App页面 显示
    • 点击show 也是list页面
<script setup>
</script>

<template>
  <div>
    <h1>App页面</h1>
    <hr />
    <!-- 路由的连接 -->
    <router-link to="/">home页</router-link>
    <br />
    <router-link to="/list">list页</router-link>
    <br />
    <router-link to="/showAll">showAll页 重定向到list</router-link>
    <br />
    <router-link to="/add">add页</router-link>
    <br />
    <router-link to="/update">update页</router-link>
    <br />
    <!-- 路由连接对应视图的展示位置 -->
    <hr />默认展示位置:
    <router-view></router-view>
    <hr />Home视图展示:
    <router-view name="homeView"></router-view>
    <hr />List视图展示:
    <router-view name="listView"></router-view>
    <hr />Add视图展示:
    <router-view name="addView"></router-view>
    <hr />Update视图展示:
    <router-view name="updateView"></router-view>
    <hr />
  </div>
</template>

<style scoped>
</style>

router

三、编程式路由(useRouter)

普通路由

  • <router-link to="/list">list页</router-link>
  • 这种路由,to中的内容目前是固定的,点击后只能切换/list对象组件(声明式路由)

编程式路由

  • 通过useRouter,动态决定向那个组件切换的路由
  • 在 Vue 3 和 Vue Router 4中，你可以使用 useRouter 来实现动态路由(编程式路由)
  • 这里的 useRouter 方法返回的是一个 router 对象，你可以用它来做如导航到新页面、返回上一页面等操作。

案例需求:
通过普通按钮配合事件绑定实现路由页面跳转,不直接使用router-link标签

  • App.vue
<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
//创建动态路由对象
let router = useRouter();

let routePath = ref("");
let showList = () => {
  // 编程式路由
  // 直接push一个路径
  //router.push('/list')
  // push一个带有path属性的对象
  router.push({ path: "/list" });
};
</script>

<template>
  <div>
    <h1>App页面</h1>
    <hr />
    <!-- 路由的连接 -->
    <router-link to="/">home页</router-link>
    <br />
    <router-link to="/list">list页</router-link>
    <br />
    <router-link to="/showAll">showAll页 重定向到list</router-link>
    <br />
    <router-link to="/add">add页</router-link>
    <br />
    <router-link to="/update">update页</router-link>
    <br />
    <!-- 动态输入路径,点击按钮,触发单击事件的函数,在函数中通过编程是路由切换页面 -->
    <button @click="showList()">showList</button>
    <br />
    <!-- 路由连接对应视图的展示位置 -->
    <hr />默认展示位置:
    <router-view></router-view>
    <hr />Home视图展示:
    <router-view name="homeView"></router-view>
    <hr />List视图展示:
    <router-view name="listView"></router-view>
    <hr />Add视图展示:
    <router-view name="addView"></router-view>
    <hr />Update视图展示:
    <router-view name="updateView"></router-view>
    <hr />
  </div>
</template>

<style scoped>
</style>

vue

四、路由传参(useRoute)

路径参数

  • 在路径中使用一个动态字段来实现，我们称之为 路径参数
    • 例如： 查看数据详情 /showDetail/1 ,1就是要查看详情的id,可以动态添值！

键值对参数

  • 类似与get请求通过url传参,数据是键值对形式的

    • 例如: 查看数据详情/showDetail?hid=1,hid=1就是要传递的键值对参数

  • 在 Vue 3 和 Vue Router 4 中，你可以使用 useRoute 这个函数从 Vue 的组合式 API 中获取路由对象。

  • useRoute 方法返回的是当前的 route 对象，你可以用它来获取关于当前路由的信息，如当前的路径、查询参数等。

案例需求 :
切换到ShowDetail.vue组件时,向该组件通过路由传递参数

  • 修改App.vue文件
<script setup>
import { useRouter } from "vue-router";
//创建动态路由对象
let router = useRouter();
//动态路由路径传参方法
let showDetail = (id, language) => {
  // 尝试使用拼接字符串方式传递路径参数
  //router.push(`showDetail/${id}/${languange}`)
  /*路径参数,需要使用params  */
  router.push({ name: "showDetail", params: { id: id, language: language } });
};

let showDetail2 = (id, language) => {
  /*uri键值对参数,需要使用query */
  router.push({ path: "/showDetail2", query: { id: id, language: language } });
};
</script>

<template>
  <div>
    <h1>App页面</h1>
    <hr />
    <!-- 路径参数   -->
    <router-link to="/showDetail/1/JAVA">showDetail路径传参显示JAVA</router-link>
    <button @click="showDetail(1,'JAVA')">showDetail动态路由路径传参显示JAVA</button>
    <hr />
    <!-- 键值对参数 -->
    <router-link
      v-bind:to="{path:'/showDetail2',query:{id:1,language:'Java'}}"
    >showDetail2键值对传参显示JAVA</router-link>
    <button @click="showDetail2(1,'JAVA')">showDetail2动态路由键值对传参显示JAVA</button>
    <hr />showDetail视图展示:
    <router-view name="showDetailView"></router-view>
    <hr />showDetail2视图展示:
    <router-view name="showDetailView2"></router-view>
  </div>
</template>

<style scoped>
</style>
  • 修改router.js增加路径参数占位符
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'

// 导入vue组件

import ShowDetail from '../components/ShowDetail.vue'
import ShowDetail2 from '../components/ShowDetail2.vue'

// 创建路由对象,声明路由规则
const router = createRouter({
    history: createWebHashHistory(),
    routes: [

        {
            /* 此处:id  :language作为路径的占位符 */
            path: '/showDetail/:id/:language',
            /* 动态路由传参时,根据该名字找到该路由 */
            name: 'showDetail',
            components: {
                showDetailView: ShowDetail
            }
        },
        {
            path: '/showDetail2',
            components: {
                showDetailView2: ShowDetail2
            }
        },
    ]

})

// 对外暴露路由对象
export default router;
  • ShowDetail.vue 通过useRoute获取路径参数
<script setup>
import { useRoute } from "vue-router";
import { ref, onUpdated } from "vue";

// 获取当前的route对象
let route = useRoute();
let languageId = ref(0);
let languageName = ref("");

//  借助更新时生命周期,将数据更新进入响应式对象
onUpdated(() => {
  // 获取对象中的参数
  languageId.value = route.params.id;
  languageName.value = route.params.language;
  console.log(languageId.value);
  console.log(languageName.value);
});
</script>

<template>
  <div>
    <h1>ShowDetail页面</h1>
    <h3>编号{{route.params.id}}:{{route.params.language}}是世界上最好的语言</h3>
    <h3>编号{{languageId}}:{{languageName}}是世界上最好的语言</h3>
  </div>
</template>

<style scoped>
</style>
  • ShowDetail2.vue通过useRoute获取键值对参数
<script setup type="module">
import { useRoute } from "vue-router";
import { onUpdated, ref } from "vue";
// 获取当前的route对象
let route = useRoute();
let languageId = ref(0);
let languageName = ref("");
//  借助更新时生命周期,将数据更新进入响应式对象
onUpdated(() => {
  // 获取对象中的参数(通过query获取参数,此时参数是key-value形式的)
  console.log(route.query);
  console.log(languageId.value);
  console.log(languageName.value);
  languageId.value = route.query.id;
  languageName.value = route.query.language;
});
</script>

<template>
  <div>
    <h1>ShowDetail2页面</h1>
    <h3>编号{{route.query.id}}:{{route.query.language}}是世界上最好的语言</h3>
    <h3>编号{{languageId}}:{{languageName}}是世界上最好的语言</h3>
  </div>
</template>

<style scoped>
</style>

useRoute 函数用来接收参数
route.param 表示路径参数
route.query 表示键值对参数

1

五、路由守卫

  • 路由守卫是用于在路由切换期间进行一些特定任务的回调函数。
  • 路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。
  1. 全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。
  2. 全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。
  3. 守卫代码的位置: 在router.js中

…

总结

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/365018.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

第八篇：node模版引擎Handlebars及他的高级用法（动态参数）

第八篇：node模版引擎Handlebars及他的高级用法（动态参数）

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 &#x1f4d8; 引言&#xff1a; &#x1f…
阅读更多...
Armv8-M的TrustZone技术之在安全状态和非安全状态之间切换

Armv8-M的TrustZone技术之在安全状态和非安全状态之间切换

Armv8-M安全扩展允许在安全和非安全软件之间直接调用。 Armv8-M处理器提供了几条指令来处理状态转换： 下图显示了安全状态转换。 如果入口点的第一条指令是SG且位于非安全可调用内存位置中，则允许从非安全到安全软件的直接API函数调用。 当非安全程序调用安全API时，API通过…
阅读更多...
前妻(C#)-基础03-枚举-预处理指令

前妻(C#)-基础03-枚举-预处理指令

前妻C#-基础语法03 枚举关于控制台IO及注释C#预处理指令 枚举 枚举是用户定义的整数类型。在声明一个枚举时&#xff0c;要指定改枚举的实例可以包含的一组可接受的值。不仅如此&#xff0c;还可以给值指定易于记忆的名称&#xff0c;如果在代码的某个地方&#xff0c;要试图把…
阅读更多...
Java学习day24：线程的同步和锁（例题+知识点详解）

Java学习day24：线程的同步和锁（例题+知识点详解）

声明&#xff1a;该专栏本人重新过一遍java知识点时候的笔记汇总&#xff0c;主要是每天的知识点题解&#xff0c;算是让自己巩固复习&#xff0c;也希望能给初学的朋友们一点帮助&#xff0c;大佬们不喜勿喷(抱拳了老铁&#xff01;) 往期回顾 Java学习day23&#xff1a;线程构…
阅读更多...
ElasticSearch 8.x 使用 snapshot（快照）进行数据迁移

ElasticSearch 8.x 使用 snapshot（快照）进行数据迁移

ElasticSearch 1、ElasticSearch学习随笔之基础介绍 2、ElasticSearch学习随笔之简单操作 3、ElasticSearch学习随笔之java api 操作 4、ElasticSearch学习随笔之SpringBoot Starter 操作 5、ElasticSearch学习随笔之嵌套操作 6、ElasticSearch学习随笔之分词算法 7、ElasticS…
阅读更多...
儿童护眼台灯怎么选择？一文教你如何选择儿童护眼台灯

儿童护眼台灯怎么选择？一文教你如何选择儿童护眼台灯

护眼台灯是家长最常为孩子购买的用品之一&#xff0c;但是大部分人对它的了解并不多&#xff0c;很多人购买之后反而会觉得眼睛更容易疲劳&#xff0c;有不适的情况&#xff01;最主要的原因是因为挑选的台灯不够专业&#xff0c;次要原因则是使用方法不正确。所以今天跟大家讲…
阅读更多...
BI是什么？

BI是什么？

企业SaaS服务2B或者其他2C&#xff0c;数据都会越集越多&#xff0c;丰富的数据可视化展示成为销售及老板们的需求&#xff1b;当然通过如下BI了解 你需要思考是不是只是能做、想做、值得做一个&#xff0c;如果写简单的数据统计&#xff0c;至于用不用的上BI都另说&#xff0…
阅读更多...
本地部署GeoServe服务并结合内网穿透实现任意浏览器远程访问

本地部署GeoServe服务并结合内网穿透实现任意浏览器远程访问

文章目录 前言1.安装GeoServer2. windows 安装 cpolar3. 创建公网访问地址4. 公网访问Geo Servcer服务5. 固定公网HTTP地址 前言 GeoServer是OGC Web服务器规范的J2EE实现&#xff0c;利用GeoServer可以方便地发布地图数据&#xff0c;允许用户对要素数据进行更新、删除、插入…
阅读更多...
C#学习笔记_类(Class)

C#学习笔记_类(Class)

类的定义 类的定义是以关键字 class 开始&#xff0c;后跟类的名称。类的主体&#xff0c;包含在一对花括号内。 语法格式如下&#xff1a; 访问标识符 class 类名 {//变量定义访问标识符 数据类型 变量名;访问标识符 数据类型 变量名;访问标识符 数据类型 变量名;......//方…
阅读更多...
【Linux】-多线程的知识都收尾（线程池，封装的线程，单例模式，自旋锁）

【Linux】-多线程的知识都收尾（线程池，封装的线程，单例模式，自旋锁）

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …
阅读更多...
深度剖析Sentinel热点规则

深度剖析Sentinel热点规则

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 深度剖析Sentinel热点规则 前言核心概念解析&#xff1a;数字守护者的起源核心概念解析&#xff1a;简单示例演示&#xff1a; 参数索引&#xff1a;规则的基石参数索引的作用&#xff1a;不同场景下选…
阅读更多...
2024美国大学生数学建模美赛选题建议+初步分析

2024美国大学生数学建模美赛选题建议+初步分析

总的来说&#xff0c;去年算是美赛环境题元年&#xff0c;去年的开放度是较高的&#xff0c;今年每种赛题类型相对而言平均了起来 提示&#xff1a;DS C君认为的难度&#xff1a;E<BCF<AD&#xff0c;开放度&#xff1a;DBCE<A<F。 以下为A-F题选题建议及初步分析…
阅读更多...
小型内衣裤洗衣机哪个牌子好？家用小型洗衣机推荐

小型内衣裤洗衣机哪个牌子好？家用小型洗衣机推荐

相信对于很多用户而言&#xff0c;宁愿强撑着疲惫的身子手洗内衣裤&#xff0c;也不愿把内衣裤与外穿衣物一起放进洗衣机洗。内衣裤与外穿衣物的脏污情况不同&#xff0c;内衣裤是贴身衣物&#xff0c;上面留有人体的汗液和分泌物&#xff0c;有可能带有大量真菌。而外衣上则是…
阅读更多...
动环系统断电告警的防误报

动环系统断电告警的防误报

机房一般接入的市电为三相380伏特&#xff0c;也有用单向220伏特的。UPS本身提供断电告警的功能&#xff0c;这个告警在各种种类的UPS中都是提供的&#xff0c;不同电压的市电输入都支持&#xff1b;三相电另外有缺相告警事件。但这些告警事件存在抖动或者误判。 瞬间的低压或…
阅读更多...
LiveGBS流媒体平台GB/T28181功能-支持配置开启 HTTPS 服务什么时候需要开启HTTPS服务

LiveGBS流媒体平台GB/T28181功能-支持配置开启 HTTPS 服务什么时候需要开启HTTPS服务

LiveGBS功能支持配置开启 HTTPS 服务什么时候需要开启HTTPS服务 1、配置开启HTTPS1.1、准备https证书1.1.1、选择Nginx类型证书下载 1.2、配置 LiveCMS 开启 HTTPS1.2.1 web页面配置1.2.2 配置文件配置 2、验证HTTPS服务3、为什么要开启HTTPS3.1、安全性要求3.2、功能需求 4、搭…
阅读更多...
Linux基础知识合集

Linux基础知识合集

整理了一下学习的一些关于Linux的一些基础知识&#xff0c;同学们也可以通过公众号菜单栏查看&#xff01; 一、基础知识 Linux基础知识 Linux命令行基础学习 Linux用户与组概念初识 Linux文件与目录权限基础 Linux中文件内容的查看 Linux系统之计划任务管理 二、服务器管理 Vm…
阅读更多...
Vue中使用 Element-ui form和 el-dialog 进行自定义表单校验清除表单状态

Vue中使用 Element-ui form和 el-dialog 进行自定义表单校验清除表单状态

文章目录 问题分析 问题 在使用 Element-ui el-form 和 el-dialog 进行自定义表单校验时&#xff0c;出现点击编辑按钮之后再带年纪新增按钮&#xff0c;出现如下情况&#xff0c;新增弹出表单进行了一次表单验证&#xff0c;而这时不应该要表单验证的 分析 在寻找多种解决…
阅读更多...
深信服技术认证“SCCA-C”划重点：深信服云计算关键技术

深信服技术认证“SCCA-C”划重点：深信服云计算关键技术

为帮助大家更加系统化地学习云计算知识&#xff0c;高效通过云计算工程师认证&#xff0c;深信服特推出“SCCA-C认证备考秘笈”&#xff0c;共十期内容。“考试重点”内容框架&#xff0c;帮助大家快速get重点知识。 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff08…
阅读更多...
【无刷电机学习】电流采样电路硬件方案

【无刷电机学习】电流采样电路硬件方案

【仅作自学记录&#xff0c;不出于任何商业目的】 目录 AD8210 INA282 INA240 INA199 AD8210 【AD8210数据手册】 在典型应用中&#xff0c;AD8210放大由负载电流通过分流电阻产生的小差分输入电压。AD8210抑制高共模电压(高达65V)&#xff0c;并提供接地参考缓冲输出&…
阅读更多...
Trie树数据结构——（字符串统计，最大异或对）

Trie树数据结构——（字符串统计，最大异或对）

Trie树&#xff1a;是一种能够高效存储和查找字符串集合的数据结构 Trie字符串统计 思路&#xff1a; &#xff08;笔记来自AcWing 835. Trie字符串统计 - AcWing&#xff09; 代码如下&#xff1a; #include<iostream> #include<cstdio> #include<string>…
阅读更多...
最新文章

Copyright @ 2022~2023