Vue 路由配置参数说明

/**
 * Note: sub-menu only appear when route children.length >= 1
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)   如果设置为true,则项目将不会显示在侧边栏中(默认为false)
 * alwaysShow: true               if set true, will always show the root menu                        如果设置为true,将始终显示根菜单
 *                                if not set alwaysShow, when item has more than one children route, 如果不始终设置Show,则当项具有多个子路由时
 *                                it will becomes nested mode, otherwise not show the root menu      它将成为嵌套模式,否则不显示根菜单
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb               如果设置为no redirect,则breadcrumb中不会重定向
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)                     名称由<keep alive>使用(必须设置!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)                 控制页面角色(可以设置多个角色)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)             侧边栏和面包屑中显示的名称(推荐集)
    icon: 'svg-name'             the icon show in the sidebar                                        图标显示在侧栏中
    noCache: true                if set true, the page will no be cached(default is false)           如果设置为true,则不会缓存该页(默认为false)
    affix: true                  if set true, the tag will affix in the tags-view                    如果设置为true,则标记将粘贴在“标记”视图中
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)   如果设置为false,则该项将隐藏在breadcrumb中(默认为true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set            如果设置路径,侧边栏将突出显示您设置的路径
  }
 */
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue配置路由参数和动态值可以通过路由的 path 属性和 component 属性来实现。 首先,path 属性可以设置路由的路径,如果需要传递参数可以在路径中使用冒号(:)来表示参数。例如: ```javascript { path: '/user/:id', component: User } ``` 这个路由的路径为 `/user/:id`,其中 id 是一个动态的参数。在 User 组件中可以通过 `$route.params.id` 来获取这个参数的值。 如果需要在路由中传递多个参数,可以在 path 属性中使用多个冒号来表示。例如: ```javascript { path: '/user/:id/:name', component: User } ``` 这个路由的路径为 `/user/:id/:name`,其中 id 和 name 都是动态的参数。在 User 组件中可以通过 `$route.params.id` 和 `$route.params.name` 来获取这两个参数的值。 除了 path 属性,还可以在路由中使用 props 属性来传递参数。例如: ```javascript { path: '/user', component: User, props: { id: 1, name: 'Tom' } } ``` 这个路由的路径为 `/user`,在 User 组件中可以通过 props 来获取传递的参数,例如: ```javascript export default { props: ['id', 'name'], // ... } ``` 在使用这种方式传递参数时,需要在组件中声明 props,并且这些 props 会被自动注入到组件实例中。 总结一下,Vue配置路由参数和动态值的方式有以下几种: 1. 在 path 属性中使用冒号来表示动态参数; 2. 在 props 属性中传递参数; 3. 在组件中通过 `$route.params` 来获取动态参数的值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值