فهرست منبع

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

xiaoxian521 1 سال پیش
والد
کامیت
1aba27590f

+ 1 - 1
src/layout/components/tag/index.vue

@@ -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'
               : ''
           ]"

+ 4 - 1
src/views/components/dialog/index.vue

@@ -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
           >

+ 4 - 1
src/views/empty/index.vue

@@ -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>

+ 4 - 1
src/views/error/403.vue

@@ -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,

+ 4 - 1
src/views/error/404.vue

@@ -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,

+ 4 - 1
src/views/error/500.vue

@@ -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,

+ 6 - 6
src/views/tabs/index.vue

@@ -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>