Yêu cầu thg 11 22, 2022 1:04 SA 163 1 2
  • 163 1 2
+2

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

Chia sẻ
  • 163 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 ạ. ^^

thg 11 23, 2022 1:36 SA

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

2 CÂU TRẢ LỜI


Đã trả lời thg 11 22, 2022 8:52 SA
+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
thg 11 22, 2022 9:13 SA

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 thg 11 23, 2022 2:03 SA
+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
thg 11 23, 2022 4:15 SA

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

thg 11 23, 2022 6:37 SA

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

thg 11 23, 2022 6:40 SA

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