美文网首页
[vue-router4进阶] 2.重定向和别名

[vue-router4进阶] 2.重定向和别名

作者: 林哥学前端 | 来源:发表于2021-11-03 11:48 被阅读0次

重定向

重定向通过redirect属性来定义,页面会跳到redirect指定的路由
比如,我们定义一个根路由‘/’,让它重定向到‘/index’:

  {
    path: '/',
    redirect: '/index',
  },

就是这样,很简单,在浏览器输入http://localhost:8081/
路由会自动重定向到http://localhost:8081/index, 并且显示首页的内容

redirect还可以是一个方法,这样重定向会更加灵活,在某些时候很有用:

  {
    path: '/list',
    redirect: to=>{ // redirect是一个方法,返回要重定向的目标
      // 这里可以进行一些判断,决定重定向到哪个页面
      return {path:'/index'} // 比如重定向到首页
    },
  },

别名

我们可以给‘/index’页面定义一个别名‘/home’:

  {
    path: '/index',
    alias: '/home', // 新增
    component: () => import('./views/index'),
    name: 'index',
    meta: {
      title: '首页',
      keepAlive: true,
      transition: 'slide-left',
    },
  },

这样,在访问http://localhost:8081/home,显示的也是index页面,和重定向的区别就是,这是页面的路由是不变的,还是/home
别名还有别的更高级的用法,我觉着没什么用,就不介绍了,有兴趣的小伙伴去官网看吧。

相关文章

  • [vue-router4进阶] 2.重定向和别名

    重定向 重定向通过redirect属性来定义,页面会跳到redirect指定的路由比如,我们定义一个根路由‘/’,...

  • 路由重定向和别名

    重定向 当用户访问/a时,URL 将会被替换成 /b,然后匹配路由为/b。可以简单理解为:/a的路径是无效路径 重...

  • (七)重定向第二种方式别名

    本节知识点 别名的使用 alias 别名的形式 首先在路由配置文件里面 配置router-link 别名和冲重定向...

  • Vue Router 重定向和别名

    重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: 重定向的目标也可以是一个命...

  • Linux 第五天

    命令别名 目录别名 重定向 Linux 第五天: 扩展: 命令别名: 进入: vim /root/.bashr 加...

  • vue全家桶(2.4)

    3.6.重定向和别名 #3.6.1.重定向 路由重定向通俗的说就是从一个路由重新定位跳转到另一个路由,例如:访问的...

  • 重定向与别名

    重定向 有的时候,我们会根据某种需求对用户请求的页面进行重新定位 案例 现有一小说网站,提供了 男生频道 和 ...

  • 第07章重定向管道

    输出重定向案例 > < 脚本中使用重定向 2.输入重定向及结合案例 管道 | 重定向和管道的符号对比。重定向输出到...

  • Day34 - Linux vim编辑器

    将命令别名:alias 新命令名='原命令' 删除别名:unalias 创建归档 解归档 > : 输出重定向>> ...

  • vue-router | 重定向和别名

    前提:当你搭建完一个vue脚手架之后,通过localhost:8080打开一个页面时,url的显示会变成http:...

网友评论

      本文标题:[vue-router4进阶] 2.重定向和别名

      本文链接:https://www.haomeiwen.com/subject/ljgqzltx.html