Yêu cầu Nov 22nd, 2022 1:04 a.m. 187 1 2
  • 187 1 2
+2

Check điều kiện bằng route params trong vue 3?

Chia sẻ
  • 187 1 2

Em đang làm trang Dashboard(Sử dụng Vue3) phần khung ban đầu có 1 thanh nav trên và một thanh menu bên phải, và cái router view để điều hướng sẽ ở dưới, nó trông như thế này... image.png

Đây là phần code ở views

<template>
  <div class="flex h-screen bg-gray-50 dark:bg-gray-900" id="app">
    <Sidebar v-if="checklogin" :isSideMenuOpen="isSideMenuOpen" @close-side-menu="isSideMenuOpen = false" />

    <div class="flex flex-col flex-1 w-full">
      <Navigation v-if="checklogin" @open-side-menu="isSideMenuOpen = !isSideMenuOpen" />
      <div class="p-6 dark:text-white">
        <RouterView />
      </div>
    </div>
  </div>
</template>

Em muốn khi là trang đăng nhập thì nó sẽ ẩn nav và thanh menu phải đi nên em đang bắt theo route params như này và rõ là giá trị đúng lúc chạy ban đầu ở trang đăng nhập đã đúng nhưng khi qua trang mới nó lại fail và báo lỗi

Đây là code phần logic ạ

<script setup lang="ts">
import { ref, onMounted, watch} from "vue";
import { useRoute } from 'vue-router'
import "@/assets/main.min.css" 

import { RouterView } from 'vue-router'
import Sidebar from './components/Sidebar.vue'
import Navigation from './components/Navigation.vue'


const isSideMenuOpen = ref(false);
const checklogin = ref(true);
const route = useRoute()
let pathName: any = route.matched[0].name
console.log("=>:",pathName) 
onMounted(()=>{
  if(pathName=='login'){
    checklogin.value = false
  }
  else{ 
    checklogin.value = true
 }
})
</script>

Em đang sử dụng : VueJs ver3, Vite, TypeScript Em vừa chuyển qua Vue3 nên cũng chưa nắm rõ lắm mong nhận được sự chỉ dẫn của các cao nhân ạ. ^^

Nov 23rd, 2022 1:36 a.m.

Nó báo lỗi gì vậy bạn?

2 CÂU TRẢ LỜI


Đã trả lời Nov 22nd, 2022 8:52 a.m.
+2

Như bạn show code ở trên thì component trên bạn đang dùng làm layout và sẽ thực hiện render ra các view tương ứng tại vị trí RouterView. Vấn đề ở đây là khi router sang view khác thì vẫn sử dụng component layout trên và chỉ thay đổi component tại vị trí RouterView. => Component layout sẽ không được int lại => hook onMounted sẽ chỉ chạy lần đầu khi vào ứng dụng Cách xử lý (1trong các cách sau):

  1. Sử dụng hook updated
  2. Sử dụng watch
  3. sử dụng computed
Chia sẻ
Avatar Phạm Duy Vũ @binchanhkun99
Nov 22nd, 2022 9:13 a.m.

Mình cũng đang lăn tăn đoạn này thanks b nhưng mình có xem qua watch thì thấy cách nó dùng bên vue 3 khá là khác hmm mình sẽ tìm hiểu thằng computed

Đã trả lời Nov 23rd, 2022 2:03 a.m.
+2

Cái điều kiện hiển thị Navigation dựa theo path của route thì bạn dùng computed sẽ là hợp lý. Tham khảo code:

<script setup lang="ts">
import { ref, computed} from "vue";
import { useRoute } from 'vue-router';

// ...

const route = useRoute();
const checkLogin = computed(() => route.name === 'login');
</script>
Chia sẻ
Avatar Phạm Duy Vũ @binchanhkun99
Nov 23rd, 2022 4:15 a.m.

sao em vào đúng path là /login rồi mà value nó vẫn trả là false a nhỉ

Nov 23rd, 2022 6:37 a.m.

@binchanhkun99 Bạn thử check cái route.path xem value nó đang trả về có là /login không hay giá trị nào?

Nov 23rd, 2022 6:40 a.m.

@binchanhkun99 À sr bạn. Bạn đang dùng route name để kiểm tra có phải trang login không mà nhỉ. 😄 Thế bạn sửa lại cái computed để nó compare với route name nha.

const checkLogin = computed(() => route.name === 'login');
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí