Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим, как определять вложенные маршруты с помощью Vue Router.
Зачем нужны вложенные маршруты?
Нам нужны вложенные маршруты для организации маршрутов, в которых компоненты вложены на многоуровневую глубину.
Например, нам нужно найти способ организовать такие маршруты, как:
/user/bar/profile
/user/bar/posts
в одно связное место.
Определение вложенных маршрутов
Мы можем определить вложенные маршруты, добавив массив children
в запись маршрута, а затем в шаблоне родительского маршрута мы должны добавить router-view
для отображения дочерних маршрутов.
Например, мы можем написать следующее:
src/index.js
:
const Profile = { template: "<p>{{$route.params.user}}'s profile</p>" }; const Posts = { template: "<p>{{$route.params.user}}'s posts</p>" }; const User = { template: ` <div> <p>user - {{$route.params.user}}</p> <router-view></router-view> </div> ` }; const routes = [ { path: "/user/:user", component: User, children: [ { path: "posts", component: Posts }, { path: "profile", component: Profile } ] } ]; const router = new VueRouter({ routes }); new Vue({ el: "#app", router });
index.html
:
<!DOCTYPE html> <html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <div> <router-link to="/user/foo">Foo User</router-link> <router-link to="/user/foo/posts">Foo Post</router-link> <router-link to="/user/foo/profile">Foo Profile</router-link> </div> <router-view></router-view> </div> <script src="src/index.js"></script> </body> </html>
В приведенном выше коде мы имеем:
const routes = [ { path: "/user/:user", component: User, children: [ { path: "posts", component: Posts }, { path: "profile", component: Profile } ] } ];
для определения дочерних маршрутов.
Компоненты Posts
и Profile
похожи на любые компоненты, которые мы определяли как обычно.
Однако компонент User
имеет router-view
для отображения содержимого компонентов Posts
и Profile
.
В шаблоне у нас есть 3 ссылки маршрутизатора для перехода к корневому и дочернему маршрутам:
<router-link to="/user/foo">Foo User</router-link> <router-link to="/user/foo/posts">Foo Post</router-link> <router-link to="/user/foo/profile">Foo Profile</router-link>
Тогда мы должны увидеть:
Foo User Foo Post Foo Profile user - foo foo's posts
когда мы переходим к /#/user/foo/posts
или щелкаем по Foo Post
.
И мы должны увидеть:
Foo User Foo Post Foo Profile user - foo foo's profile
когда мы переходим к /#/user/foo/profile
или щелкаем по Foo Profile
.
Когда мы переходим к /#/user/foo
или щелкаем по Foo User
, мы видим:
Foo User Foo Post Foo Profile user - foo
Любой вложенный путь, который начинается с /
, будет рассматриваться как корневой путь. Это позволяет нам использовать вложение компонентов без использования вложенного URL-адреса.
Кроме того, родительский и дочерний маршруты имеют доступ к одним и тем же параметрам маршрута.
Например, мы можем добавить компонент UserHome
и маршрут для него в приведенный выше пример следующим образом:
src/index.js
:
const Profile = { template: "<p>{{$route.params.user}}'s profile</p>" }; const Posts = { template: "<p>{{$route.params.user}}'s posts</p>" }; const UserHome = { template: "<p>{{$route.params.user}} home</p>" }; const User = { template: ` <div> <p>user - {{$route.params.user}}</p> <router-view></router-view> </div> ` }; const routes = [ { path: "/user/:user", component: User, children: [ { path: "", component: UserHome }, { path: "posts", component: Posts }, { path: "profile", component: Profile } ] } ]; const router = new VueRouter({ routes }); new Vue({ el: "#app", router });
index.html
:
<!DOCTYPE html> <html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <div> <router-link to="/user/foo">Foo User</router-link> <router-link to="/user/foo/posts">Foo Post</router-link> <router-link to="/user/foo/profile">Foo Profile</router-link> </div> <router-view></router-view> </div> <script src="src/index.js"></script> </body> </html>
Теперь, когда мы переходим к /user/foo
или щелкаем по Foo User
, мы видим:
Foo User Foo Post Foo Profile user - foo foo home
Все остальное остается прежним.
Заключение
Мы можем добавить вложенные маршруты к нашим маршрутам, добавив свойство children
с массивом маршрутов.
Затем мы должны добавить router-view
к родительскому маршруту, чтобы мы могли видеть содержимое дочерних маршрутов.
Все родительский и дочерний маршруты имеют доступ к одним и тем же параметрам маршрута.
Примечание из JavaScript In Plain English
Мы запустили три новых издания! Проявите любовь к нашим новым публикациям, подписавшись на них: AI на простом английском, UX на простом английском, Python на простом английском - спасибо и продолжайте учиться!
Мы также всегда заинтересованы в продвижении качественного контента. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора. Также сообщите нам, к каким публикациям вы хотите быть добавлены.