routes:[] 中的名称选项实际上指的是 (Vue.js CLI3)?

Question

我是vue的新手.js我现在#正在练习路由。 我的路由器.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>

如您所见，这个名字只是胡言乱语。如果路由器中的 name 选项确实在组件中引用了此名称，则 Id 预计它会失败。 但事实并非如此。一切都很好。

然后我尝试更改路由器选项中的名称，但也没有改变。

那么这个名称选项实际上有什么作用呢？ 不幸的是，官方文档对我也没有帮助。 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>

两者都将导航到用户路由，即"/用户/：用户ID">

Answer 2

如您发布的文档中所述，为方便起见，可以添加名称。例如，这对于较长的路径或将路由迭代到菜单中非常有用。

要调用这样的路由，您可以改用名称：

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

我之前使用名称的另一个方便示例是将其迭代到带有$route.name的菜单中，您希望那里有可读的名称。

Answer 3

添加到答案 1... 该名称主要用于您希望在发生某些事情后将用户从一个页面推送到另一个页面

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

如果详细信息名称不存在，则会收到错误

以及当您也特定于特定路线时，根据第一个答案

Answer 4

该组件的组件特定名称中的名称。

这在 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

组件属性中的名称和路由中的名称没有关系。