文档章节

vue-router学习总结

汤免费
 汤免费
发布于 2017/04/24 10:31
字数 1010
阅读 94
收藏 1

vue-router学习

vue-router介绍

路由的快速开始

  • 定义各页面容器组件

  • 定义路由配置文件

  • 在入口文件添加路由配置信息

  • 修改跟组件页面信息

  • 接下来可以启动项目查看路由跳转

路由基础知识介绍

动态路由

  • 你可以通过:给一个路由添加参数
  • 之后在组件中通过this.$route.params.参数名获取+ this.$route的api文档https://router.vuejs.org/zh-cn/api/route-object.html
  • 当路由参数发生变化的时候,组件不会被卸载而是复用,这也意味着组件的生命周期钩子不会再被调用,那么你只能监听$routes实例属性知道路由发生了变化
const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

嵌套路由

  • 如果有嵌套路由,要用children属性去配置,路由路径会自动拼接
  • 可以给一个页面初始化一个组件用空路由实现

用代码进行路由跳转

  • 在组件中你可以通过this.$route获取路由对象
-  字符串
router.push('home')

- 对象
router.push({ path: 'home' })

- 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

- 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

命名路由

  • 有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建Router实例的时候,在routes配置中给某个路由设置名称。
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
  • 要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
  • 这跟代码调用 router.push() 是一回事:
router.push({ name: 'user', params: { userId: 123 }})

命名视图

  • 在跳转一个路由的时候可以同时渲染页面中的多个坑
  • 如果 router-view 没有设置名字,那么默认为 default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
  • 一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置(带上 s):
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向和别名

  • 重定向也是通过 routes 配置来完成,重定向的目标也可以是一个命名的路由,甚至是一个方法:
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/c', redirect: { name: 'foo' }},
    { path: '/d', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})
  • 当路由路径太深的时候,你可以给路由起一个别名,那么通过别名和访问太深的路由的页面渲染效果是一样的
  • 『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么『别名』又是什么呢?
  • /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
  • 上面对应的路由配置为:
const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

三种history

  • mode
  • 类型: string
  • 默认值: "hash" (浏览器环境) | "abstract" (Node.ls 环境)
  • 可选值: "hash" | "history" | "abstract"
  • 配置路由模式:
  • hash: 使用URL hash值来做路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。
  • history: 依赖 HTML5 History API 和服务器配置。查看官方HTML5 History模式
  • abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的API,路由会自动强制进入这个模式。

导航钩子

  • 可以在钩子里做权限校验和日志记录
  • 一共有三种导航钩子,在钩子中别忘了一定要调用next方法
  • 官方网址

© 著作权归作者所有

共有 人打赏支持
上一篇: js深浅拷贝
下一篇: VUE2.0学习总结
汤免费

汤免费

粉丝 21
博文 8
码字总数 18222
作品 0
海淀
前端工程师
私信 提问
Vue-Router源码分析之index.js

前言 上一篇我们聊了:Vue-Router源码学习之install方法 虽然最近需求着实不少,但是感觉自己学习劲头还是蛮足的,并没有被需求压垮。今天,带来Vue-Router源码解析系列的第二篇文章:index...

酸楚与甘甜
2018/09/10
0
0
Vue-Router源码学习之install方法

Vue是怎么注册插件的呢? 使用过Vue的coder都知道,如果想注册一个vue的插件,在vue对象上能够使用的话(并不是绑在Vue.prototype上的那种暴力方式),必须使用Vue.use(你的插件)的方式来注册...

酸楚与甘甜
2018/09/07
0
0
使用Webpack的代码分离实现Vue的懒加载(译文)

当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将,或的代码进行分离并按需加载,会极大的提高App的首屏加载速度。 在Vue的项目中,我们可以在三种不同的情况下使用懒加...

Lee_tanghui
2018/08/05
0
0
使用Webpack的代码分离实现Vue懒加载(译文)

当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将,或的代码进行分离并按需加载,会极大的提高App的首屏加载速度。 image_1ck53hs7oe40usv1ria21scqm9.png-576.8kB 在V...

大灰狼的小绵羊哥哥
2018/10/11
0
0
Vue-router(一) HelloWorld

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是...

阿刚ABC
2018/04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

图像库stb_image

https://github.com/nothings/stb 目前一般主流的图像格式也就是bmp,jpg,png,tga,dds,除了DDS一般是给DX用的,虽然一堆OpenGL程序也有用的,但是我一般只用png和tga, png不用说了,带a...

robslove
10分钟前
0
0
Spring 事务提交回滚源码解析

前言 在上篇文章 Spring 事务初始化源码分析 中分析了 Spring 事务初始化的一个过程,当初始化完成后,Spring 是如何去获取事务,当目标方法异常后,又是如何进行回滚的,又或是目标方法执行...

TSMYK
29分钟前
1
0
百度黄埔学院将培养一批首席AI架构师,为“国之重器”赋能

深度学习高端人才不仅是AI发展的重要养分,也是企业转型AI巨大推动力。2019年1月19日,百度黄埔学院——深度学习架构师培养计划在百度科技园举行开学典礼,深度学习技术及应用国家工程实验室...

深度学习之桨
55分钟前
2
0
扒站wget仿站

wget -c -r -p -np -k http://xxx.com/xxx 其中: -c, --continue (断点续传) 接着下载没下载完的文件 -r, --recursive(递归) specify recursive download.(指定递归下载) -p, --page...

临江仙卜算子
58分钟前
2
0
Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部