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

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

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

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

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

  • /products/6-tom

  • /products/21

  • /products/phones

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация Vue.js</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="/" exact>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@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js-router/dist/vue-router.js"></script>
<script>
const NotFound = { template: '<h2>Page Not Found</h2>' }
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 },
  { path: '*', component: NotFound }
];

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

new Vue({
  el: '#app',
  router: router
})
</script>
</body>
</html>

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

Параметры маршрутов в Vue.js

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

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация Vue.js</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="/" exact>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@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js-router/dist/vue-router.js"></script>
<script>
const NotFound = { template: '<h2>Page Not Found</h2>' }
const Home = { template: '<h2>Home Page</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 },
  { path: '*', component: NotFound }
];
// создаем объект маршрутизатора
const router = new VueRouter({
    mode: 'history',
    routes: routes
});

new Vue({
  el: '#app',
  router: router
})
</script>
</body>
</html>

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

  • /products/tablets/2

  • /products/phones/3

params in vuerouter

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

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

<div id="app">
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js-router/dist/vue-router.js"></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 NotFound = { template: '<h2>Страница не найдена</h2>' }

const routes = [
  { path: '/', component: Home },
  { path: '/products/:id?', component: Products },
  { path: '*', component:NotFound }
];

const router = new VueRouter({
    mode: 'history',
    routes: routes
});
new Vue({
  el: '#app',
  router: router
})
</script>

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

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

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