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="[
'scroll-item is-closable',
linkIsActive(item),
$route.path === item.path && showModel === 'card'
route.path === item.path && showModel === 'card'
? 'card-active'
: ''
]"

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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