1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之路由详解

Vue教程之路由详解

路由参数

普通参数

定义路由

页面跳转,? 的方式传递参数。

在目标页面获取参数

路径参数

路径参数,即参数是路由的一部分,若是没有参数则路由不成立,报404错误。

定义路由

跳转方式

第一种获取参数的方式

第二种获取参数的方式,使用这种方式获取参数,则需要定义路由的时候,配置 props 属性为 true 。

命名路由

顾名思义,命名路由就是给路由起一个名字,我们可以通过这个名字进行路由跳转。

定义路由

通过路由名称进行路由跳转及参数传递

  • query : 普通参数
  • params : 路径参数

编程式导航

编程式导航,即通过绑定事件的方式通过全局 $router 对象,进行路由跳转。

嵌套路由

使用 children 关键字在现有路由中嵌入路由。

router/index.js 内容如下:

需注意嵌套路由,子路由会继承父路由的views页面。同时父路由的views中,需要使用 router-view 标签接收子路由的views。

子路由的views页面。

命名视图

有时候想同时 (同级) 展示多个视图,而不是嵌套展示。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s):

router

Home 视图

重定向

重定向,顾名思义就是说,让我们访问一个路由的时候,程序会自动将路由跳转到其他的路由,这就是重定向了。

使用 redirect 关键字,进行路由重定向。

使用路径进行重定向

使用 name 重定向

函数使用 路径 的方式重定向

函数使用 名称 的方式重定向

别名

别名,就是为路由的路径重新定义一个名字,浏览器的地址栏里面显示的是路由别名,但实际上访问的是实际的路由地址。

使用 alias 关键字定义别名

“别名” 的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

路由传参的三种方式

布尔模式

对象模式

函数模式

通过函数的方式传参

通过 ES6 将函数的方式简化

vue-router 的两种模式

hash

在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件。

优点:

  • 只需要前端配置路由表, 不需要后端的参与
  • 兼容性好, 浏览器都能支持
  • hash值改变不会向后端发送请求, 完全属于前端路由

缺点:

  • hash值前面需要加#, 不符合url规范,也不美观

history

history运用了浏览器的历史记录栈,之前有back,forward,go方法,之后在HTML5中新增了pushState()和replaceState()方法,它们提供了对历史记录进行修改的功能,不过在进行修改时,虽然改变了当前的URL,但是浏览器不会马上向后端发送请求。

优点:

  • 符合url地址规范, 不需要#, 使用起来比较美观

缺点

  • 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误。
  • 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持。
这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注