Lavas 的路由配置规则实践

[easonyq]

如果您还没有看过 Lavas 的官网上关于自动生成的路由规则的介绍，那请先补习一下。

官网的介绍已经对 Lavas 全部的路由生成规则作出了介绍。但在实际项目开发过程中，依然有开发者集中询问。问题主要集中于嵌套路由和动态参数上，因此我以实际项目为例介绍一下。

我们以 vue-router 官方教程中的例子来看，它列出了两条路由的实现方式，分别是：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:postId	/user/evan/post/123	{ username: 'evan', postId: 123 }

用 Lavas 来实现的话，我们需要在 pages 中建立如下目录。

pages
└── user/
        └── _username/
                ├── Index.vue
                └── post/
                        └── _postId.vue

这里有两个注意点。

动态参数

动态参数不仅仅可以作用于 vue 文件，也可以作用于目录，如例子中的 _username

嵌套路由和 Index

部分开发者出于各种原因，会将 user/_username/Index.vue 替换成 user/_username.vue。这样把 _username 变成了一个嵌套路由。而如果 user/_username.vue 中没有写 <router-view> 标签的话，那么当访问路由 /user/evan/post/123 时，会等价于访问 /user/evan，这是开发者碰到的最普遍的问题。

在实际项目中，开发者应该根据实际项目的需求，来决定自己是否要使用嵌套路由。举例来说：

• 如果 /user/evan/post/123 和 /user/evan 是完全不相同的两个页面，那么 不应该 使用嵌套路由，应该和例子中一样建立 Index.vue 来实现。

• 如果 /user/evan/post/123 和 /user/evan 是父子关系的页面（如父页面是一个 TAB 页面，子页面是 TAB 中的内容），那么 应该 使用嵌套路由，即建立一个和目录同名的 vue 。

[easonyq]

补充一点：
当使用 keep-alive 时，需要组件 export default 的 name 属性和 lavas 自动生成的路由规则中的 name 一致。有关这部分的信息可以参考 #167