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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
动态加载js的方法汇总
Feb 13 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
JavaScript cookie原理及使用实例
May 08 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代码优化技巧小结
2015/09/29 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
[原创]图片分页查看
2006/08/28 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
pybind11在Windows下的使用教程
2019/07/04 Python
学习Django知识点分享
2019/09/11 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
weblogic面试题
2016/03/07 面试题
宝信软件JAVA工程师面试经历
2012/08/19 面试题
教师申诉制度
2014/01/29 职场文书
篝火晚会主持词
2014/03/25 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
教师工作能力自我评价
2015/03/04 职场文书
婚庆答谢词大全
2015/09/29 职场文书
三好学生竞选稿
2015/11/21 职场文书
施工安全协议书
2016/03/22 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python