Недавно я столкнулся с такой необходимостью, а именно: нажать определенную кнопку, войти на определенную страницу, а затем выполнить на этой странице определенную операцию (например, запрос определенного интерфейса, присвоение начального значения и т. д.).
Это требование кажется простым, но на самом деле оно не сложно. **Однако** я столкнулся с проблемой: когда я нажимаю эту кнопку на этой странице, поскольку путь маршрута перехода тот же, страница не обновляется, как мне определить, нажал ли я ее? та кнопка, которая переходит на эту страницу?
Итак, я задумался о передаче параметров в маршруте. С помощью метода передачи параметров в маршруте я могу определить, изменился ли параметр. Если он изменился, значит, маршрут снова вошел.
Используйте метод запроса для передачи параметров и прикрепляйте к параметрам метку времени, чтобы каждый раз, когда они поступают, это были разные параметры.
Нажмите кнопку, чтобы сделать следующее:
const router = useRouter()
const goDocumentNotification = () => {
router.push({
path: `/documentNotification`,
query: {
t: Date.now()
}
})
}
Добавьте следующий код на страницу, которую вы вводите:
// использовать watch монитор route изменения
watch(
() => route.query.t,
(newPath, oldPath) => {
// изменить маршрутизацию, выполнить соответствующие операции
query()
}
)
Хорошо, после описанной выше операции вы можете отслеживать обновление страницы и выполнять операцию по тому же маршруту перехода.
Говоря об этом, давайте суммируем несколько способов передачи параметров в vue-router.
Адрес маршрутизации отображается в браузере следующим образом:
http://127.0.0.1:5190/drs/index.html#/documentNotification/0
Декларативный:
// ребенокмаршрутизация Конфигурация
{
path: '/documentNotification/:id?', // ?Указывает, можно ли передать этот параметр или нет.
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: «Уведомление о проблеме»,
}
}
// Родительский компонент маршрутизации
<router-link :to="/documentNotification/123">ВходитьdocumentNotificationмаршрутизация</router-link>
Программно:
// ребенокмаршрутизация Конфигурация
{
path: '/documentNotification/:id?', // ?Указывает, можно ли передать этот параметр или нет.
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: «Уведомление о проблеме»,
}
}
// Передача параметров в родительском стиле (обычно вызывается событиями)
router.push({
path:'/documentNotification/${yourParam}',
})
О получении параметров:
route.params.id
После обновления Vue Router от 22 августа 2022 г. его больше нельзя писать таким образом. Что касается передачи параметров без отображения параметров, вы можете обратиться к следующему блогу:
https://blog.csdn.net/m0_57033755/article/details/129927829
Адрес маршрутизации отображается в браузере следующим образом:
http://localhost:3000/#/documentNotification?t=1700140985974
Декларативный:
//ребенокмаршрутизация Конфигурация
{
path: '/documentNotification',
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: «Уведомление о проблеме»
}
}
//Родительский компонент маршрутизации
<router-link :to="{name:'documentNotification',query:{t:123}}">ВходитьdocumentNotificationмаршрутизация</router-link>
Программно:
//ребенокмаршрутизация Конфигурация
{
path: '/documentNotification',
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: «Уведомление о проблеме»
}
}
router.push({
path: `/documentNotification`,
query: {
t: Date.now()
}
})
О получении параметров:
route.query.t
ок, вот и все. Какие у вас мнения или мысли по этому поводу? Вы можете это обсудить~?