vue怎么嵌套多级路由页面打不开_【Vue】嵌套路由

嵌套路由

之前用路由做了一个导航页面，这波在路由里面嵌套路由，在社区页面中再添加三个路由学术讨论、资源下载以及个人中心。

嵌套的子路由同样需要通过 router.js 文件进行配置，配置方法为在父路由中设置 children

children 数组中包含几个对象，则表示有几个子路由

子路由的路径可以使用简写，即路径中不写 / ，在跳转路径时会向上查找，找到父路由路径并拼接。例如子路由路径为 path: 'academic'，父路由路径为 path: '/community'，则在跳转子路由时路径会自动拼接为 '/community/academic'

子路由配置完毕后，在 community 组件中添加对应的标签用于子路由的跳转和显示

重定向

嵌套的子路由确实是实现了，但是现在点击社区跳转到社区对应页面时，页面中是空白的，按照常理应该默认显示第一个路由学术讨论中的内容，毕竟用户在点击社区时总不可能让他看到空白的内容。那么这个时候就需要使用重定向，在用户点击社区时将路径重定向为学术讨论的路径，实现一个社区页面中默认显示学术讨论内容的效果。

重定向 redirect，进入到某个路径时自动重定向到另一个路径

这样学术讨论内容的默认显示就完成了

重定向函数形式

重定向同样可以通过函数的形式来写：

$router.push

$router.replace

现在还有最后一个小功能，即点击 logo 时将页面跳转回主页，当然可以通过给 logo 也设置一个路由来实现，不过在路由对象上有两个方法也可以实现这个功能。

在 logo 上绑定一个点击事件 handleClick

在 handleClick 中通过路由对象上的 $router 属性调用路由方法 puth 实现触发点击事件进行路由跳转。

push 和 replace 的区别在于 puth 方法进行跳转后在浏览器历史中新增一条记录，而 replace 则在跳转后在浏览器历史中替换跳转前页面的记录