Как во Vue Router указать не обязательную часть url?

В 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. Это очень удобно, когда нам необходимо создать динамические маршруты, где некоторые параметры могут быть опциональными.