切换导航
简历
工具
演示
查询
导航菜单
服务端
30
前端
114
数据库
82
进阶开发
8
桌面程序
2
QA
15
软件使用
36
规范协议
5
操作系统
11
AI
0
复用资源
6
硬件
0
标签
HTML
正则表达式
Json
包管理工具
vite
CSS
XPath
JavaScript
Jquery
less
ES6
Vue
React
vue 3
Layui
editor.md
sea.js
Zepto.js
mysql.js
mssql.js
NodeJs
Express
前端template
YAML
杂项
外部链接
.NET Core SDK和运行时安装包
淘宝 NPM 镜像
查询网
Tables Generator线上表格转换工具
引用cdn在线脚本和样式
首页
前端
Vue Router 中 $route 和 $router 说明
[TOC] ## $route 路由中的 $route 可以直接在模板 `<template>` 中使用，但不能在 `script setup` 使用，这是因为模板里 $route 是 Vue 全局自动注入的，可以直接用，而 `<script setup>` JS 里没有 this，没有自动注入 $route，写 this.$route 和直接写 $route 都会报错 |代码位置|写法|结果| |--|--|--| |模板|$route.params|✅ 正常| |`<script setup>`|this.$route|❌ 报错| |`<script setup>`|$route|❌ 报错| |`<script setup>`|useRoute()|✅ 正常| > Tips：在 `script setup` 内的js没有this，使用 console.log(this) 可以看到输出的是 undefined ```html <template> {{ $route.params.name }} // ✅ 正常 </template> ``` **在 script setup 中错误的使用方法** ```html <script setup> const name = $route.params const name1 = this.$route.params </script> <!-- 上面两个定义赋值都会报错：Cannot read properties of undefined (reading '$route') --> ``` **在 script setup 中正确的使用方法** ``` HTML <script setup> // 第一步：导入 import { useRoute } from 'vue-router' // 第二步：创建实例 const route = useRoute() // 第三步：使用 console.log(route.params.name) </script> ``` ## $router $router 同样不能在 `<script setup>` js 代码中使用，模板中可以使用，原因与 $route 一致，模板里 $router 是 Vue 全局自动注入的
扫一扫手机看
点击排行
windows 文件资源管理器使用
Layui 弹窗open使用说明
SQL Server 中字符串函数使用
C# 使用QQ邮箱代理做邮件接收功能
SQL Server关于apply的两种形式cross apply 和 outer apply
ASP.NET MVC 模型的自定义验证
nvm安装及常用命令
SQL Server 中数据类型转换
SQL Server 中WITH AS短语的使用
IE浏览器下AJAX缓存问题导致数据不更新的解决办法
订阅号
