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的运行机制和设计理念分析
Apr 05 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 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
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
ECMAScript 基础知识
2007/06/29 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
js 页面输出值
2008/11/30 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
python解析xml文件实例分析
2015/05/27 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
django 将model转换为字典的方法示例
2018/10/16 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
tensorflow多维张量计算实例
2020/02/11 Python
Python内置异常类型全面汇总
2020/05/28 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
后勤部长岗位职责
2013/12/14 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
幼师个人总结范文
2015/02/28 职场文书