perf: 规范template模版中路由写法,不再使用$route$router,此写法vue-tsc编译不通过

This commit is contained in:
xiaoxian521 2023-05-12 13:01:59 +08:00
parent a1b8b27a1c
commit 1aba27590f
7 changed files with 27 additions and 12 deletions

View File

@ -525,7 +525,7 @@ onMounted(() => {
:class="[ :class="[
'scroll-item is-closable', 'scroll-item is-closable',
linkIsActive(item), linkIsActive(item),
$route.path === item.path && showModel === 'card' route.path === item.path && showModel === 'card'
? 'card-active' ? 'card-active'
: '' : ''
]" ]"

View File

@ -1,4 +1,5 @@
<script setup lang="tsx"> <script setup lang="tsx">
import { useRouter } from "vue-router";
import { h, createVNode, ref } from "vue"; import { h, createVNode, ref } from "vue";
import { message } from "@/utils/message"; import { message } from "@/utils/message";
import { cloneDeep } from "@pureadmin/utils"; import { cloneDeep } from "@pureadmin/utils";
@ -9,6 +10,8 @@ defineOptions({
name: "Dialog" name: "Dialog"
}); });
const router = useRouter();
function onBaseClick() { function onBaseClick() {
addDialog({ addDialog({
title: "基本使用", title: "基本使用",
@ -380,7 +383,7 @@ function onBeforeSureClick() {
采用函数式调用弹框组件更多操作实例请参考 采用函数式调用弹框组件更多操作实例请参考
<span <span
class="cursor-pointer text-primary" class="cursor-pointer text-primary"
@click="$router.push({ name: 'Dept' })" @click="router.push({ name: 'Dept' })"
>系统管理页面</span >系统管理页面</span
> >

View File

@ -1,16 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
import back from "@/assets/svg/back.svg?component"; import back from "@/assets/svg/back.svg?component";
defineOptions({ defineOptions({
name: "Empty" name: "Empty"
}); });
const router = useRouter();
</script> </script>
<template> <template>
<div class="w-full h-full text-center"> <div class="w-full h-full text-center">
<h1>业务内容模块</h1> <h1>业务内容模块</h1>
<p>使用场景需要外嵌平台某个页面不需要展示菜单导航以及额外模块</p> <p>使用场景需要外嵌平台某个页面不需要展示菜单导航以及额外模块</p>
<div class="back" title="返回上一页" @click="$router.go(-1)"> <div class="back" title="返回上一页" @click="router.go(-1)">
<back class="w-[80px] h-[80px]" /> <back class="w-[80px] h-[80px]" />
</div> </div>
</div> </div>

View File

@ -1,9 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
import noAccess from "@/assets/status/403.svg?component"; import noAccess from "@/assets/status/403.svg?component";
defineOptions({ defineOptions({
name: "403" name: "403"
}); });
const router = useRouter();
</script> </script>
<template> <template>
@ -46,7 +49,7 @@ defineOptions({
</p> </p>
<el-button <el-button
type="primary" type="primary"
@click="$router.push('/')" @click="router.push('/')"
v-motion v-motion
:initial="{ :initial="{
opacity: 0, opacity: 0,

View File

@ -1,9 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
import noExist from "@/assets/status/404.svg?component"; import noExist from "@/assets/status/404.svg?component";
defineOptions({ defineOptions({
name: "404" name: "404"
}); });
const router = useRouter();
</script> </script>
<template> <template>
@ -46,7 +49,7 @@ defineOptions({
</p> </p>
<el-button <el-button
type="primary" type="primary"
@click="$router.push('/')" @click="router.push('/')"
v-motion v-motion
:initial="{ :initial="{
opacity: 0, opacity: 0,

View File

@ -1,9 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
import noServer from "@/assets/status/500.svg?component"; import noServer from "@/assets/status/500.svg?component";
defineOptions({ defineOptions({
name: "500" name: "500"
}); });
const router = useRouter();
</script> </script>
<template> <template>
@ -46,7 +49,7 @@ defineOptions({
</p> </p>
<el-button <el-button
type="primary" type="primary"
@click="$router.push('/')" @click="router.push('/')"
v-motion v-motion
:initial="{ :initial="{
opacity: 0, opacity: 0,

View File

@ -101,14 +101,14 @@ function onCloseTags() {
<el-button class="m-2" @click="onCloseTags">关闭标签</el-button> <el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
<el-divider /> <el-divider />
<el-button @click="$router.push({ name: 'Menu1-2-2' })"> <el-button @click="router.push({ name: 'Menu1-2-2' })">
跳转页内菜单传name对象优先推荐 跳转页内菜单传name对象优先推荐
</el-button> </el-button>
<el-button @click="$router.push('/nested/menu1/menu1-2/menu1-2-2')"> <el-button @click="router.push('/nested/menu1/menu1-2/menu1-2-2')">
跳转页内菜单直接传要跳转的路径 跳转页内菜单直接传要跳转的路径
</el-button> </el-button>
<el-button <el-button
@click="$router.push({ path: '/nested/menu1/menu1-2/menu1-2-2' })" @click="router.push({ path: '/nested/menu1/menu1-2/menu1-2-2' })"
> >
跳转页内菜单传path对象 跳转页内菜单传path对象
</el-button> </el-button>
@ -116,7 +116,7 @@ function onCloseTags() {
<el-divider /> <el-divider />
<el-button <el-button
@click=" @click="
$router.push({ router.push({
name: 'Menu1-2-2', name: 'Menu1-2-2',
query: { text: '传name对象优先推荐' } query: { text: '传name对象优先推荐' }
}) })
@ -126,7 +126,7 @@ function onCloseTags() {
</el-button> </el-button>
<el-button <el-button
@click=" @click="
$router.push({ router.push({
path: '/nested/menu1/menu1-2/menu1-2-2', path: '/nested/menu1/menu1-2/menu1-2-2',
query: { text: '传path对象' } query: { text: '传path对象' }
}) })
@ -143,7 +143,7 @@ function onCloseTags() {
</el-link> </el-link>
<el-divider /> <el-divider />
<el-button @click="$router.push({ name: 'Empty' })"> <el-button @click="router.push({ name: 'Empty' })">
跳转无Layout的空白页面 跳转无Layout的空白页面
</el-button> </el-button>
</el-card> </el-card>