vue中的重定向和别名

news/2024/7/10 0:17:43 标签: vue, 重定向和别名

重定向:

重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,
重定向也是通过 routes 配置来完成,下面例子是从 "*" 重定向到 /home:(下面例子中列举了四种方法)

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    
    {
      path:'*',
    //  重定向,下面的几种方法都可以
    //   redirect:'/home'
    //   redirect:{path:'/home'}
    //   redirect:{name:'Home'}
      redirect:(to)=>{
        //to目标路由对象,就是访问的路径的路由信息
        console.log(to);
        if(to.path==='/123'){
          return '/about';
        }else if(to.path=='/456'){
          return '/document'
        }else{
          return '/home';
        }

      }
    }
  ]
})

在例子中我们可以看到有四种方法都可以实现重定向

1、重定向的目标可以是一个路由地址:

const router = new Router({
  routes: [
    { path: '*', redirect: '/home'}
  ]
})

2、重定向的目标也可以是一个对象,包含路由地址:

const router = new Router({
  routes: [
    { path: '*', 
      redirect: {path:'/home'}
   }
  ]
})

3、重定向的目标也可以是一个命名的路由:

const router = new Router({
  routes: [
    { path: '*', 
      redirect: {name:'Home'}
   }
  ]
})

4、重定向的目标可以是一个方法,动态返回重定向目标:

const router = new Router({
  routes: [
    { path: '*', 
      redirect:(to)=>{
        //to目标路由对象,就是访问的路径的路由信息
        if(to.path==='/123'){
          return '/about';
        }else if(to.path=='/456'){
          return '/document'
        }else{
          return '/home';
        }

      }
   }
  ]
})

别名:

/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

const Router = new Router({
   routes:[
    {
      path: '/home',
      name: 'Home',
      component: home,
      alias:'/index'
     }
   ]

})

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


http://www.niftyadmin.cn/n/951761.html

相关文章

codeigniter autoload.php,CodeIgniter配置之autoload.php自动加载用法分析_PHP

本文实例分析了CodeIgniter配置之autoload.php自动加载用法。分享给大家供大家参考,具体如下:CodeIgniter带了自动加载的功能,可以全局加载类库、模型、配置、语言包等,对于需要全局使用的功能相当方便。例如:有个全局…

vue-router中的滚动行为

滚动行为: 使用前端路由,当切换到奥新路由时,想要页面滚动到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router,可以自定义路由切换时如何滚动 这个功能只在支持 history.pushState 的浏览器中可用。…

jdbc 预编译 mysql,​JDBC 预编译 增删改查

​创建 book 表create table book(id int primary key auto_increment,title varchar(100),price decimal(10,2),birth TIMESTAMP,publish_date TIMESTAMP,update_date TIMESTAMP);2.JDBC 预编译方式 处理速度比较快, 它会将 sql 预编译缓存预编译方式 添加 book 记录package …

动态路由匹配

我们经常需要把某种模式匹配到的所有路由,全部映射到同个组件,那么我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果 动态路径参数,以冒号开头 看个小示例 const router new Router({routes:[{path:/user/:tip?/:use…

mysql 协议 官方,mysql通信协议

标签&#xff1a;MySQL通信报文结构长度使用3个字节表示&#xff0c;最大值16MByte.TypeNameDescriptionint<3>payload_lengthpayload的长度&#xff0c;按照the least significant byte first存储&#xff0c;3个字节的payload 长度和1个字节的序列号组合成报文头int<…

matlab报错集锦,matlab编程笔记:错误集锦

总结一些自己遇到过的使人抓狂的报错&#xff0c;往往是自己粗心大意造成的&#xff1a;1、变量名与函数名混用disp(jafjjaja)??? Index exceeds matrix dimensions原因&#xff1a;前面把disp定义为变量了&#xff0c;编程的时候千万要注意噢&#xff01;已存在的函数名不能…

vue-router 中的过渡动效

<router-view> 是基本的动态组件&#xff0c;所以我们可以用 <transition> 组件给它添加一些过渡效果&#xff1a; <transition><router-view class"center"></router-view></transition> 当然要想要实现过渡效果需要配合过渡的…

中英文翻译功能 php,thinkphp实现中英文之间百度翻译 --- 2020-09-07

image.png注意&#xff1a;翻译的时候有ip限制&#xff0c;要把自己电脑所属的ip地址加上去namespace app\index\controller;use think\Controller;use think\Db;class Base extends Controller{/** 百度翻译入口* Created by PhpStorm.* User: Administrator* Date: 2020/8/27…