Параметры маршрутов

Последнее обновление: 04.11.2020

Маршруты во Vue 3 могут содержать параметры, которые позволяют при навигации передавать некоторые данные. Для определения параметра в конец шаблона маршрута после двоеточия добавляется название параметра:

{ path: '/products/:id', component: Products }

Например, в данном случае определен параметр id. И такому маршруту , к примеру, будут соответствовать такие пути запроса как:

  • /products/6-tom

  • /products/21

  • /products/phones

Та часть, которая идет после последнего слеша, будет интерпретироваться как значение параметра id.

В компоненте Vue 3 мы можем получить параметры запроса через объект $route.params, который содержит значения всех параметров. В частности, для обращения к параметру id нужно использовать выражение $route.params.id.

К примеру, определим следующую страницу index.html:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
<style>
ul{list-style-type: none;padding: 0;}
li{display: inline-block;}
a{padding: 5px;}
a.router-link-active, li.router-link-active>a {
  color: red;
}
</style>
</head>
<body>
<div id="app">
	<ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/products/1">Product 1</router-link></li>
      <li><router-link to="/products/2">Product 2</router-link></li>
    </ul>
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const Home = { template: '<h2>Home Page</h2>' }
const Products = { template: '<h2>Product {{$route.params.id }}</h2>' }
 
const routes = [
  { path: '/', component: Home },
  { path: '/products/:id', component: Products }
];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

const app = Vue.createApp({});
app.use(router);	
app.mount('#app');
</script>
</body>
</html>

Здесь маршрут, использующий компонент Products, применяет один параметр id:

Параметры маршрутов в Vue 3 и $route.params

Подобным образом можно использовать большее количество параметров:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
<style>
ul{list-style-type: none;padding: 0;}
li{display: inline-block;}
a{padding: 5px;}
a.router-link-active, li.router-link-active>a {
  color: red;
}
</style>
</head>
<body>
<div id="app">
	<ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/products/tablets/2">Tablet 2</router-link></li>
      <li><router-link to="/products/phones/3">Phone 3</router-link></li>
    </ul>
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const Home = { template: '<h2>Home Page</h2>' }
const NotFound = { template: '<h2>Page Not Found {{$route.params.pathMatch}}</h2>' }
const Products = { template: `<div><h2>Product</h2>
                                  <h3>Category: {{$route.params.category }}</h3>
                                  <h3>Id: {{$route.params.id }}</h3>
                                </div>` }
 
const routes = [
  { path: '/', component: Home },
  { path: '/products/:category/:id', component: Products },
];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

const app = Vue.createApp({});
app.use(router);	
app.mount('#app');
</script>
</body>
</html>

В данном случае маршрут { path: '/products/:category/:id', component: Products } применяет два параметра category и id, поэтому такому маршруту будут соответствовать следующие пути:

  • /products/tablets/2

  • /products/phones/3

Передача параметров в vue-router

Регулярные выражения в параметрах

В прошлой теме было рассмотрено использование параметров в маршрутов. Например, мы могли бы определить следующий маршрут:

{ path: '/products/:category/:id', component: Products }

где применяется статический сегмент /products и динамические параметры category и id. Но система маршрутизации Vue также позволяет использовать при определении маршрутов регулярные выражения, что позволяет реализовать более изощренные сценарии при обработке маршрутов. По факту, когда, например, необходимо выделить из строки запроса параметр id (или другие динамические параметры), система маршрутизации применяет регулярное выражение ([^/]+) (пока не встретится слеш /). Рассмотрим некоторые сценарии.

Необязательные параметры

Параметры могут быть необязательными. Для таких параметров необязательно передавать значения. Для их определения после названия параметра ставится вопросительный знак:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
<style>
ul{list-style-type: none;padding: 0;}
li{display: inline-block;}
a{padding: 5px;}
a.router-link-active, li.router-link-active>a {
  color: red;
}
</style>
</head>
<body>
<div id="app">
	<ul>
      <li><router-link to="/">Главная</router-link></li>
      <li><router-link to="/products">Все товары</router-link></li>
      <li><router-link to="/products/2">Товар 2</router-link></li>
    </ul>
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const Home = { template: '<h2>Главная</h2>' }
const Products = { template: `
<div>
  <h2 v-if="$route.params.id">Товар {{$route.params.id}}</h2>
  <h2 v-else>Список товаров</h2>
</div>` }
 
const routes = [
  { path: '/', component: Home },
  { path: '/products/:id?', component: Products }
];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

const app = Vue.createApp({});
app.use(router);	
app.mount('#app');
</script>
</body>
</html>

В данном случае в маршруте { path: '/products/:id?', component: Products } параметр id определен как необязательный, поэтому компонент Products будет обрабатывать запросы как по пути "/products/3", так и по пути "/products".

Необязательные параметры optional params в Vue 3

Параметр представляет только числа

Выше параметр id мог представлять обычную строку. Но, допустим, у нас id должен представлять только числа. В этом случае мы можем использовать регулярное выражение "(\d+)":

const routes = [
  { path: '/', component: Home },
  { path: '/products/:id(\d+)', component: Products }
];

Также мы можем совместить оба условия - параметр может отсутствовать, но если он присутствует, он должен представлять число:

const routes = [
  { path: '/', component: Home },
  { path: '/products/:id(\\d+)?', component: Products }
];

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850