vue嵌套路由分析及404重定向实现方法

本文阐述了vue嵌套路由和404重定向的实现。分享给大家参考，如下：

第一部分：vue嵌套路由

什么是嵌套路由？

嵌套路由意味着您可以在已路由的页面下继续使用路由，而嵌套意味着路由内的路由。例如，在vue中，如果我们不使用嵌套路由，则只有一个路由器视图，但是如果我们使用它，则组件中也有一个路由器视图，这就构成了嵌套。

为什么要使用嵌套路由？

例如，在一个页面中，页面的上半部分有三个按钮，下半部分根据点击不同的按钮显示不同的内容，所以我们可以把这个组件的下半部分看作一个嵌套的路由，也就是说，在这个组件下需要另一个路由器视图。当我单击不同的按钮时，它们的路由器链接指向的组件将呈现在路由器视图中。

官网是怎么介绍的？

每次谈官网，都要谈百度。不要用百度搜索。

说官网提了这个数字是好的，但是描述起来太繁琐了。吐槽。

这是现实生活中很好的应用界面，通常由多层嵌套组件组成。同样，URL中的每个动态路径根据一定的结构对应嵌套组件的每一层。如上图所示。

也就是说，用户代表用户页面，用户在vue中可以看作是一个单独的页面。对于用户，必须有一个用户。这里的foo(小明、小红)代表一个用户，这里的简介可以理解为个人主页，这里的帖子可以理解为这个人发表的文章，标题可能不变。比如，不管你是切换到这个人发表的文章，还是切换到这个人的个人主页，我们都希望在顶部显示同样的东西，切换的时候，我们会改变下面的部分，我们可以用router-view来写，所以这是嵌套路由。

使用vue-router，这种关系可以简单地通过使用嵌套路由配置来表达。

div id=' app ' router-view/router-view/div const User={ template : ` div class=' User ' H2 User { { $ route . params . id } }/H2 router-view/router-view/div ` } const router=new VueRouter({ routes : [{ path :/{//当/User/:id/post成功匹配//User post将呈现在用户的路由器视图中，路径： ' post '，组件：用户posts }，//当/User/: id成功匹配时，//UserHome将呈现在用户{path: ' '，组件：user home}的路由器视图中，//.其他子路由]} ]})好的！这大致是一条嵌套的路线！其中，第一个代码是将router-view放入文件中，这是渲染高级路由匹配的组件的顶层出口。

从路线配置中我们可以看到，当路径为/User/Xiaoming或者/user/Xiaohong时，用户会被渲染到页面，这是顶级路线。(:id是小明和小红。然后在这个页面中有一个嵌套的路由。当然，如果url是/user/Xiaoming，则不会显示任何内容。如果我们想要渲染某个东西，即使它是/user/Xiaoming，那么我们可以设置path: ' '对应的路线，这样ever/user/Xiaoming可以显示更多。

如果我们想看小明的个人主页，也就是/user/小明/profile会将UserProfile组件渲染到这个二级路由中。

如果要看小明发布的文章，也就是/user/小明/post会把UserPost组件渲染到这个二级路由中，也是二级路由。

其实有这么多概念，不是很简单吗？

但也需要注意以下几点：

1.从上面的代码可以看出，在组件中，我们可以通过$route.params.id在user/Xiaoming /post中获取Xiaoming，这样就可以进行个性化设置了。

2.以/开头的嵌套路径将作为根路径，这允许您在不设置嵌套路径的情况下充分利用嵌套组件。

也就是说，在上面的代码中，我们在children下编写了path :‘profile’，相当于拼接成/user/:id/profile。当然，我们也可以直接写path3360'/user/: id/profile '，最终的结果也是一样的，但我个人认为后者的表达是可以明确的。如果嵌套层次太多，可能会出现错误。

第2部分：404重定向

有时，我们可能输入了错误的网址，或者由于各种原因(如不再存在)而无法再访问它，因此我们可以重定向这种情况。非常简单，只需将以下代码添加到路由中：

{path:' * '，redirect:'/'}表示我们可以重定向到“/”以查找所有(*代表所有)错误页面。

希望本文对vue.js程序的设计有所帮助。