文档章节

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

p
 peakedness丶
发布于 12/06 19:53
字数 1487
阅读 148
收藏 5
第一部分: 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程序设计有所帮助。

© 著作权归作者所有

共有 人打赏支持
p
粉丝 44
博文 115
码字总数 138330
作品 0
长沙
私信 提问
Vue单页及多页应用全局配置404页面实践

这篇文章也发在我的博客,欢迎围观😄 写在前面 前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目,均采用v...

FrankCheung
05/20
0
0
Vue2.0笔记——vue-router路由

简介 使用Vue.js开发SPA(Single Page Application)单页面应用。 vue-router可以通过html5的history API或者hash实现单页应用,即不刷新跳转,切换地址,只是页面上的组件的切换; vue-rout...

逝岁月
04/24
0
0
可能比文档还详细--VueRouter完全指北

前言 关于标题,应该算不上是标题党,因为内容真的很多很长很全面.主要是在官网的基础上又详细总结,举例了很多东西.确保所有新人都能理解!所以实际上很多东西是比官网还详细的.你想要的,在官网...

shotCat
08/27
0
0
(4)添加vue-router

(4)添加vue-router 1 安装vue-router 2 页面准备 新建目录,此目录下面建立4个组件、、、。每个文件只有表示该文件的一个题目,如为: 3 路由配置 新建文件,内容如下: 所涉及到的内容,在...

neumeng
10/18
0
0
用addRoutes实现动态路由

原文地址:前端路上,转载请注明出处。 之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路,因为不喜欢在每次路由跳转的before钩子里做判断,所以在初始化Vue实例前对路由做了...

tower1229
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码

iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCell JHLikeButton - 有趣的点赞动画 兼容X...

Android爱开源
15分钟前
0
0
08.Beetl自定义方法以及直接访问java类方法---《Beetl视频课程》

本期视频实现了发布评论时间自定义显示; 内容简介:使用了自定义方法以及直接访问java方法实现了发布时间自定义显示 一起学beetl目录:https://my.oschina.net/u/1590490?tab=newest&catal...

Gavin-King
16分钟前
0
0
上币至iamToken

https://github.com/consenlabs/token-profile 点击Fork按钮,插入到自己的github项目中 cd /Users/shijun/Desktop/blockChain/iamToken git clone https://github.com/yellmi1983/token-pro......

八戒八戒八戒
19分钟前
0
0
spark——sparkCore源码解析之RangePartitioner

HashPartitioner分区可能导致每个分区中数据量的不均匀。而RangePartitioner分区则尽量保证每个分区中数据量的均匀,将一定范围内的数映射到某一个分区内。分区与分区之间数据是有序的,但分...

freeli
19分钟前
1
0
常用的ES6语法

什么是ES6?   ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。   ECMAScript和JavaScr...

peakedness丶
23分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部