2月11日-vue-cli 路由(2) 路由的优先级

Profile Picture
Published on Feb 11, 2020🌏 Public

路由的优先级

在我们的路由规则中,如果有某个路径,有多条规则可以与之匹配,那么,哪个规则先定义了,那就就生效。

使用*进行模糊匹配

      {
        path: '/user-*',
        component: c1
      },

当我们访问的路径是以user-开头的,都可以访问:

/user-
/user-1234
/user-13241234/12342134/124/1234

地址上的参数params

通过在规则中定义要接受的参数名:参数名

 {
        path: '/b/:channel/:id',
        component: c1
      },

这个定义,表示我们要接收channel和id两个地址参数。

/b/xxx/11             channel:xxx  id:11
/b/123412341234/11    channel:123412341234  id:11
/b/123412341234       匹配不到
/b/123412341234/      匹配不到

我们接收到的数据,会由路由帮我们加入组件实例的$route对象内,放在params属性中。

c1组件中我们将接收的数据显示出来

<template>
    <div>c1
        <p>channel:{{$route.params.channel}}</p>
         <p>id:{{$route.params.id}}</p>
    </div>
</template>

$route中记录着路由当前的状态数据。

地址上的查询字符串

要接收查询字符串,我们不需要加额外的代码。

直接从$route.query就可以取到了,比如地址上有?page=1

<p>page:{{$route.query.page}}</p>

练习:使用路由,制作一个聊天室的登录程序。

/login:登录,一个输入框,聊天昵称。输入完毕后点击进入聊天室,跳转到聊天室界面。 /chat:聊天室,显示欢迎xxx

昵称的传递使用params参数