В Vue Router можно указывать не обязательную часть URL с помощью флага "?".
Для того чтобы указать не обязательную часть URL в Vue Router, нужно добавить флаг "?" после параметра внутри пути. Например:
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({ routes: [ { path: '/user/:id?', component: User, }, ], });
В данном примере мы указали путь '/user/:id?', где параметр "id" является не обязательным. Знак вопроса после параметра "id" указывает, что он может отсутствовать в URL.
Теперь, при переходе по URL "/user" или "/user/123", компонент User будет отображаться. Если в URL будет указан параметр "id", то он будет доступен в компоненте User через объект $route.params. В данном примере, если в URL указан параметр "id", то его значение будет доступно через this.$route.params.id.
<template> <div> <h2>User Page</h2> <p v-if="$route.params.id">User ID: {{$route.params.id}}</p> </div> </template> <script> export default { name: 'User', mounted() { console.log(this.$route.params.id); }, }; </script>
В данном примере, компонент User выводит текст "User ID: [id]" только в случае, если в URL указан параметр "id". Также, в методе mounted компонента мы выводим значение параметра "id" в консоль.
Таким образом, с помощью флага "?", мы можем указать не обязательную часть URL в Vue Router. Это очень удобно, когда нам необходимо создать динамические маршруты, где некоторые параметры могут быть опциональными.