vue-router的routes中属性详解_vue routes属性-优快云博客

本文链接：https://blog.youkuaiyun.com/webDevelopSnail/article/details/109564813

本文详细介绍了Vue Router中的mode、name和meta属性。mode属性定义路由模式，name属性在多个场景中发挥作用，尤其在组件间导航时。meta属性对于SEO至关重要，它提供了页面元数据，有助于搜索引擎优化和机器理解页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、代码展示

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            component: () => import('.iews/Index'),
            name: "home",
            children: [
                { path: '/home', name: "home", meta: { title: 'Vue后台管理' }, component: () => import('.src/home/Index') },
            ]
        },
    ]
})

二、属性详解

mode属性

mode: 'hash',//hash模式下，浏览器地址不规整,带有#
mode: 'history',//history模式下，浏览器地址规整，但需要后台支持

name的属性
name属性在很多场景中用到

用法1：通过name属性，为一个页面中不同的router-view渲染不同的组件,如下代码所示：
<template>
  <div id="app">
     <router-view></router-view>
     <router-view  name="Hello"></router-view> //将渲染Hello组件
     <router-view  name="text"></router-view>   //将渲染text组件
  </div>
</template>
用法2：可以用name传参 使用$router.name获取组件name值
 <template>
  <div id="app">
    <p>{{ $route.name }}</p> //可以获取到渲染进来的组件的name值
    <router-view></router-view>
  </div>
</template>
用法3：用于pramas传参的引入 pramas必须用name来引入 query可以用name或者path来引入
   var router = new VueRouter({
      routes: [
        { name:'register', path: '/register/:id/:name', component: register }
      ]
    })
   <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>

meta属性
网站的访问流量中，有相当一部分都是来自于搜索引擎，而SEO往往又都是从优化meta标签开始的，meta标签提供关于HTML文档的元数据(元数据指用于描述数据的数据)。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。