vue中嵌套路由与404重定向如何实现-创新互联

这篇文章将为大家详细讲解有关vue中嵌套路由与404重定向如何实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

目前创新互联建站已为千余家的企业提供了网站建设、域名、网络空间、网站托管维护、企业网站设计、拉孜网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

具体如下:

第一部分: vue嵌套路由

嵌套路由是什么?

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

为什么要使用嵌套路由?

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

官网是怎么介绍的?

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

vue中嵌套路由与404重定向如何实现

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

这就是实际生活中的一个很好的应用界面, 通常是由多层嵌套的组件组合而成。 同样的, 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     },      // ...其他子路由    ]   }  ] })

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

从路由配置中,我们可以看到: 当路径是 /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中嵌套路由与404重定向如何实现”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:vue中嵌套路由与404重定向如何实现-创新互联
文章地址:http://pwwzsj.com/article/ddoipd.html

其他资讯