На что на самом деле ссылается опция имени в маршрутах: [] (Vue.js CLI3)?

Question

Я новичок в vue.js, и я сейчас занимаюсь маршрутизацией. Мой router.js выглядит так:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/myView',
      name: 'myView',
      component: () => import('./views/myView.vue')
    }
  ]
})

Теперь я подумал, что опция имени ссылается на имя, которое я дал «компоненту». Например, я попробовал следующее с представлением «myView»:

<template>
  <div>
    <myWorld placeholder="tester"/>
  </div>
</template>

<script>
import myWorld from '@/components/myWorld.vue'

export default {
  name: 'sklfdjns',
  components: {
    myWorld
  }
}
</script>

Как видите, название просто бредовое. Если опция имени в маршрутизаторе действительно ссылается на это имя в компоненте, я ожидаю, что это не удастся. Но это не так. Все работает просто отлично.

Затем я попытался изменить имя в опции роутера, но ничего не изменилось.

Так что же делает эта опция имени? К сожалению, официальная документация мне тоже не помогла. https://router.vuejs.org/guide/essentials/named-routes.html

Answer 1

Как уже упоминалось в документации, имена маршрутизаторов отличаются от имен компонентов. Назначение именованных маршрутов состоит в том, чтобы перемещаться без указания полного URL-адреса, т.е. просто путем указания имени, и это не ссылка на имя компонента, это просто имя вашего маршрута

router.push({ name: 'user', params: { userId: 123 }})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

оба перейдут к маршруту пользователя, который является '/ user /: userId'

Answer 2

имя в компоненте определяет имя этого компонента.

Это полезно в vue devtool для отладки, или когда вы хотите сделать компонент рекурсивно, вы должны установить имя для компонента. Например, вы хотите отобразить компонент comment внутри шаблона комментария (чтобы отобразить подкомментарий).

Имя в маршрутизаторе - это имя этого маршрута.

Например:у вас есть такой маршрут

{
      path: '/',
      component: Home
},

, когда вы хотите перейти на root page, вы делаете что-то вроде этого, верно?

this.$router.push('/')

Что если я хочу изменитькорневой путь к /admin? Я должен буду найти весь этот код this.$router.push('/') и заменить путь? Ни в коем случае!

Вместо этого я определю имя маршрута name: 'root' и буду перемещаться по маршрутам по имени.

{
      path: '/',
      name: 'root',
      component: Home
}

this.$router.push({ name: 'root' });

Как только я захочу изменить маршрут, япросто измените путь в router.js

Имя в свойстве компонента и имя из маршрута не имеют никакого отношения.

Answer 3

Добавление к ответу 1 ... имя, которое чаще всего используется, когда вы хотите перенести пользователей с одной страницы на другую после того, как что-то произошло

this.$router.push({name:'details'}) 

, если имя детали не существует, вы получаете сообщение об ошибке

, а также, когда вы также указали конкретный маршрут, согласно первому ответу

Answer 4

Как указано в документах, которые вы разместили, имя может быть добавлено для удобства. Это может быть полезно для более длинных путей или для итерации ваших маршрутов, например, в меню.

Для вызова такого маршрута вы можете использовать вместо этого имя:

<router-link :to="{ name: 'home' }">home</router-link>

Другой удобный пример, гдеЯ использовал имена до того, как перебрать его в меню с $route.name, вы хотите, чтобы там читались имена.