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


Posted in Javascript onMay 04, 2018

本文实例讲述了vue嵌套路由与404重定向实现方法。分享给大家供大家参考,具体如下:

第一部分: vue嵌套路由

嵌套路由是什么?

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

为什么要使用嵌套路由?

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

官网是怎么介绍的?

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

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

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

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

即user表示用户页, 而user就可以看成是vue中的一个单页面,对于一个user,一定要有哪一个用户,这里的foo(小明、小红)就代表了一个用户,这里的profile可以理解为个人主页,这里的posts可以理解为这个人所发表的文章, 而title可能是不变的,比如无论切换到这个人发表的文章,还是切换到这个人的个人主页,我们都希望在最上方显示同样的东西,而在切换的时候换的就是下面的部分,这个部分我们就可以用<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', 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
    },
     // ...其他子路由
   ]
  }
 ]
})

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程序设计有所帮助。

Javascript 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
javascript解析json数据的3种方式
May 08 Javascript
document.write的几点使用心得
May 14 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 #Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
node实现的爬虫功能示例
May 04 #Javascript
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
JavaScript实现百度搜索框效果
Mar 26 #Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 #Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 #Javascript
You might like
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
使用js写的一个简易的投票
2013/11/27 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
vue.js的安装方法
2017/05/12 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
2014年教师培训的自我评价
2014/01/03 职场文书
庆八一活动方案
2014/01/25 职场文书
小学数学国培感言
2014/03/10 职场文书
2014和解协议书范文
2014/09/15 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
年会邀请函范文
2015/01/30 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle