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 相关文章推荐
javascript编程起步(第六课)
Feb 27 Javascript
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
javascript实现简单留言板案例
Feb 09 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php环境无法上传文件的解决方法
2014/04/30 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Python求导数的方法
2015/05/09 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
听课评语大全
2014/04/30 职场文书
常务副总经理任命书
2014/06/05 职场文书
私人委托书格式
2014/09/10 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
先进班组事迹材料
2014/12/25 职场文书
欢迎新生标语2015
2015/07/16 职场文书
植树节新闻稿
2015/07/17 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers