# 命名路由

# 配置命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 router 实例的时候，在 routes 配置中给某个路由设置名称。


const router = createRouter({
  routes:[
    {
      path: '/pages/router/router1/router1',
      name: 'router1'
    },
    {
      path: '/pages/router/router2/router2',
      name: 'router2'
    },
    {
      path: '/pages/router/router2/router2',
      name: 'router2'
    }
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

要链接到一个命名路由，可以给 router.push() 属性传一个对象：

this.$Router.push({ name: 'router1', params: { userId: '123' }})

这两种方式都会把路由导航到 /pages/router/router1/router1 路径。

# 关于动态路由

在H5端某些情况下你可能使用了动态路由，比如：

const router = createRouter({
  routes:[
    {
      path: '/pages/router/router1/router1',
      aliasPath:'/router1/:id',
      name: 'router1'
    }
  ]
})

1
2
3
4
5
6
7
8
9

这时我们往动态路由页跳转，你可能注意到路由插件会提示出 动态路由请使用name的方式跳转。没错！！如果有这样的提示那你肯能需要重新修改跳转代码。像这样：

// 正确的打开方式
this.$Router.push({
    name:'router1',
    params:{
        id:123
    }
})

// 错误的打开方式
uni.navigateTo({
    url:'/pages/router/router1/router1?id=123'
})

1
2
3
4
5
6
7
8
9
10
11
12

name 的使用方式很普遍，更多是看你项目需求而定。

← 组件式导航路由传参 →