vue嵌套路由的概念是什么

今天小编给大家分享一下vue嵌套路由的概念是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

成都创新互联是一家专业提供保靖企业网站建设,专注与成都网站设计、成都做网站、html5、小程序制作等业务。10年已为保靖众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

vue嵌套路由的含义是：在一个路由的页面下，继续使用路由加载新的组件；可以将嵌套路由理解为父子路由，常见的多导航界面通常就是由多层嵌套的组件组合而成。

本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。

vue嵌套路由的含义是什么

嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。

在实际项目中，多个前端页面由于需求而通常由多层嵌套的组件组合而成,尤其是多导航界面。此时，路由嵌套(vue-router)的优点则表现了出来。

嵌套路由就是在一个被路由过来的页面下，所谓嵌套，也可以理解成父子路由。

为什么要使用嵌套路由

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

官网是怎么介绍的

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

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

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

const User = { template: `

User {{ $route.params.id }}

` }

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的  中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的  中
          path: 'posts',
          component: UserPosts
        }，
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的  中
        { 
           path: '', 
           component: UserHome 
        },
         // ...其他子路由     
      ]
    }
  ]
})

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

从路由配置中，我们可以看到：当路径是 /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" ，最终的结果是一样的，但是我个人认为后者的表示方法可以跟清晰的观察结构。如果嵌套层数过多，可能会出错。

3、注意需要匹配一个空的情况，然后匹配一个default组件，避免出现空白页的问题。

以上就是“vue嵌套路由的概念是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

网站栏目：vue嵌套路由的概念是什么
网页网址：http://myzitong.com/article/gjpcsg.html

vue嵌套路由的概念是什么

vue嵌套路由的含义是什么

User {{ $route.params.id }}

其他资讯