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

第一部分： vue嵌套路由

嵌套路由是什么？

嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。 比方在vue中，我们假如不使用嵌套路由，那么只有一个<router-view>，但是假如使用，那么在一个组件中就还有<router-view>，这也就构成了嵌套。

为什么要使用嵌套路由？

就比方在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们即可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个<router-view>， 当我点击不同的按钮时，他们的router-link分别所指向的组件就会被渲染到这个<router-view>中。

官网是怎样详情的？

每次说到官网，就要说一说百度，百度搜索千万别用。。

要说官网举得这个图，本意是好的，但是形容起来累赘太多。吐个槽。。

这就是实际生活中的一个很好的应用界面， 通常是由多层嵌套的组件组合而成。 同样的， URL中各段动态路径也按照某种结构对应嵌套的各层组件。如上所示。

即user表示客户页， 而user即可以看成是vue中的一个单页面，对于一个user，肯定要有哪一个客户，这里的foo（小明、小红）就代表了一个客户，这里的profile可以了解为个人主页，这里的posts可以了解为这个人所发表的文章， 而title可能是不变的，比方无论切换到这个人发表的文章，还是切换到这个人的个人主页，我们都希望在最上方显示同样的东西，而在切换的时候换的就是下面的部分，这个部分我们即可以用<router-view>来写，那么，这，就是嵌套路由。

借助vue-router，使用嵌套路由配置，即可以很简单的表达这种关系。

<div id="app"> <router-view></router-view></div>

前台全栈学习交流圈：866109386,面向1-3经验年前台开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

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', component: User,   children: [    {     // 当 /user/:id/profile 匹配成功，     // UserProfile 会被渲染在 User 的 <router-view> 中     path: 'profile',     component: UserProfile    },    {     // 当 /user/:id/posts 匹配成功     // UserPosts 会被渲染在 User 的 <router-view> 中     path: 'posts',     component: UserPosts    }，    // 当 /user/:id 匹配成功，    // UserHome 会被渲染在 User 的 <router-view> 中    {      path: '',      component: UserHome    },     // ...其余子路由   ]  } ]})

前台全栈学习交流圈：866109386,面向1-3经验年前台开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

OK！ 这大致就是嵌套路由了！ 其中，第一段代码是在文件中放了<router-view>， 这是最顶层的出口，渲染高级路由匹配到的组件。

从路由配置中，我们可以看到： 当路径是 /user/小明 或者者 /user/小红 时， 就会把User渲染到页面中，这个渲染的就是顶级路由。 （:id就是小明、小红，）。 而后这个页面中就有一个嵌套路由，当然，假如url就是 /user/小明的话，那么这个二级路由是什么都不会显示的， 假如我们希望即便只是 /user/小明， 也得渲染点什么，那么我们即可以设置 path: “” 所对应的路由，这样，即便 /user/小明 也是可以显示更多的了。

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

假如我们想看小明发表的文章，就是 /user/小明/posts 这时就会把 UserPost 组件渲染到这个二级路由中， 这也就是二级路由了。

其实概念就这么多，是不是很简单呢！

但是还需要注意下面几点：

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

2. 以 / 开头的嵌套路径会被当做根路径， 这可以让你充分的使用嵌套组件而无需设置嵌套的路径。

也就是说： 在上面的代码中，我们在children下，写path: “profile”, 就相当于拼接成了 /user/:id/profile ，当然，我们也可以直接写为 path: “/user/:id/profile” ，最终的结果是一样的，但是我个人认为后者的表示方法可以跟清晰的观察结构。 假如嵌套层数过多，可能会出错。

第二部分： 404重定向

有时，我们可能会输入错的 url， 或者者不再存在等各种起因导致其不再能被访问，那么我们即可以对于这种情况进行重定向。 很简单，只需在路由中增加下面的代码即可以了：

{   path: "*",   redirect: "/"}

即对于所有的（*代表所有）错误页面，我们都可以重定向到 “/” 中。
希望本文所述对大家vue.js程序设计有所帮助。