关于路由重定向redirect的基本使用

目录
  • 路由重定向redirect
    • 重定向
    • 案例
  • vue路由重定向+路由别名
    • 路由重定向
    • 路由别名（了解）

路由重定向redirect

重定向

使得一个路由地址A与另一个路由地址B联系起来，执行A的时候会跳转执行B。

关键字：redirect。

用户第一次访问网站页面("/根目录"首页)时，地址栏里边没有“#锚点”的信息，也就没有对应的组件用于显示，用户体验不好，现在可以通过重定向实现一种效果，即当浏览器没有任何 #锚点信息时，默认也给显示一个组件。

语法：

var router = new VueRouter({
  routes:[
    // {path:'/', redirect:'跳转到的路由地址'}
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home}
  ]
})

执行/根目录路由地址时，就跳转执行/home路由地址 ，进而把对应的组件给显示出来。

注意：

  • 1.不仅 “/” 可以被重定向，其他普通路由地址互相也可以重定向。
  • 2.重定向会使得路由再次发生调用请求。

案例

在没有任何#锚点信息的时候，显示首页组件。

const router = new VueRouter({
  routes:[
    // {path:'路由地址A', redirect:'路由地址B'}  // A 重定向执行 B
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home},
  ]
})

vue路由重定向+路由别名

路由重定向

当用户访问某个连接时，需要让用户自动重新访问另一个连接，这样的一种需求的实现，称为路由重定向

如：  

  • 用户地址栏输入：http://localhost:8080/
  • 最终地址栏显示：http://localhost:8080/#/main
  • 最终浏览器渲染：/main对应的组件

代码实现：

const routes = [
    {
        path: "/",            // 匹配用户访问的请求
        redirect: "/main"        // 将用户的请求重新定向到另一个请求
    },
    {
        path: "/main",        // 最终用户访问的地址
        copmonent: Layout
    }
]

路由别名（了解）

当用户发送了一个请求，服务器正在升级，这个请求不对应任何组件，但是为了不影响用户体验，服务器自动将这个请求转发到展示首页的组件中

如：

  • 用户浏览器地址输入：http://localhost:8080/main
  • 最终浏览器地址显示：http://localhost:8080/main
  • 最终浏览器渲染的组件：/main2对应的组件

代码展示：

const routes = [
    {path: "/", redirect: "/login"}, // 当用户访问 /时，自动重定向到/login，避免用户看到空白页面
    {path: "/login", component: Login},
    {path: "/reg", component: Register},
    {path: "/main2", component: Layout, alias: "/main"}, // 路由别名
    // {path: "/main2", component: Layout}
]

总结：

路由重定向：你输入了a，访问过程中浏览器地址自动变成了b，并且浏览器渲染展示了b组件

{path:/"a",redirect:"/b"},
 {path:"/b",component:ComponentB}

路由别名：你输入了a，然后访问到了b

{path:"/a",component:ComponentB,alias:"/a"}         //alias别名

文字描述：

用户通过路径A访问资源A，服务器让客户端重新定向访问路径B，并得到路径B的过程，此时客户端看到的访问路径是路径B，看到的资源就是资源B，这个过程就是重定向

用户通过路径A 访问资源，服务器内部将路径A转发到路径B，并且得到了资源B的过程，此时客户端看到的访问路径就是路径A，看到的资源是资源B，这个过程是别名的过程

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    在路由配置中,设置重定向后,浏览器打开是空白没有内容,这里首先确保你的结构没有写错,然后查看单词是否拼错误,一般情况是因为单词拼写错误. 修改后,跳转成功: 附录:VUE通过后端重定向到VUE的页面后,前端路由失效的解决方案 这个问题是我在做微信授权登录的时候遇到的. 具体描述: 用户打开页面后,路由拦截判断用户是否登录,如果未登录,则将用户的访问地址记录到localStorage里面,等待授权后重定向到该页面. 当我使用location.href将页面跳转到后端地址,进行微信用户信息获取完成,

  • 基于vue-router 多级路由redirect 重定向的问题

    在做多级路由的时候遇到很多问题,虽然不难,但是如果没有经验,往往要花一整天时间才能解决(可能我笨),况且网上资料也很少. 项目需要是这样的: 登录页面跳到后台页面重定向,登录页是一级路由 对应页面 登录后: 同时重定向二级和三级页面, 这样登录就会重定向了,此时url 但又有一个问题:当再次点击底部"堂食"的时候, url变成这样,并且三级页面没有出来 解决办法是:在这个"堂食"按键 添加一个方法 记住,也只有这样传参才有效 如果在<router-link&g

  • 全面解析vue router 基本使用(动态路由，嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route,

  • 关于路由重定向redirect的基本使用

    关于路由重定向redirect的基本使用

    目录 路由重定向redirect 重定向 案例 vue路由重定向+路由别名 路由重定向 路由别名(了解) 路由重定向redirect 重定向 使得一个路由地址A与另一个路由地址B联系起来,执行A的时候会跳转执行B. 关键字:redirect. 用户第一次访问网站页面("/根目录"首页)时,地址栏里边没有“#锚点”的信息,也就没有对应的组件用于显示,用户体验不好,现在可以通过重定向实现一种效果,即当浏览器没有任何 #锚点信息时,默认也给显示一个组件. 语法: var router = n

  • Vue路由 重定向和别名的区别说明

    重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由: const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 甚至是一个方法,动态返回重定向目标: const router =

  • 在nuxt中使用路由重定向的实例

    我们都知道,在写SPA的时候,我们可以通过配置vue-router来实现路由的重定向. 官方文档(以及ts类型)的定义中给出了这一选项: interface RouteConfig = { path: string, redirect?: string | Location | Function, } 也就是说,我们可以定义这样一个路由: { path: "/foo", redirect: "/foo/bar", } 这样,我们在访问/foo的时候,就会被重定向到/

  • Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)

    需求: 最近在做一个网上商城的项目,技术用的是Angular4.x.有一个很常见的需求是:用户在点击"我的"按钮时读取cookie,如果有数据,则跳转到个人信息页面,否则跳转到注册或登录页面 解决 在这里通过Angular的路由守卫来实现该功能. 1. 配置路由信息 const routes = [ { path: 'home', component: HomeComponent }, { path: 'product', component: ProductComponent },

  • Spring Boot项目@RestController使用重定向redirect方式

    目录 Spring Boot @RestController重定向redirect 解决方法如下 @RestController 注释下的重定向探讨 背景 那么springmvc内部的逻辑是如何走的呢? 下面是springmvc 默认的15种HandlerMethodReturnValueHandler Spring Boot @RestController重定向redirect Spring MVC项目中页面重定向一般使用return "redirect:/other/controller/&

  • springboot 如何重定向redirect 并隐藏参数

    springboot 如何重定向redirect 并隐藏参数

    目录 springboot 重定向redirect 并隐藏参数 1.全局异常处理方法 2.重定向方法 springboot redirect 传参问题 具体案例 springboot 重定向redirect 并隐藏参数 在做全局异常处理的时候,碰到重定向到全局错误页面 所谓隐藏参数无非是把参数放到了session中,再重定向后将该值清除 1.全局异常处理方法 @ExceptionHandler(value = Exception.class) public ModelAndView except

  • vue中关于redirect(重定向)初学者的坑

    vue中关于redirect(重定向)初学者的坑

    目录 关于redirect(重定向)初学者的坑 vue-router路由重定向redirect的使用事项 关于redirect(重定向)初学者的坑 第一个对象里是配置路由重定向path:’/'为项目的根目录,redirect重定向为渲染的路径(这里我是指向了第二个对象里的path) 所以就要写第二个对象方便 redirect 找到它.. 第二个对象里的配置path:’/index’是自定义的路径,component / Customers组件名称 还有一种是 children 如下图: 首页名字

  • react-router-dom简介(推荐)

    目录 react-router-dom 1. 安装 2. 路由组件 2.1 路由组件 2.2 路由匹配组件 2.3 导航组件 3. 使用 3.1 基本使用 3.2 Route动态传参 3.3 嵌套路由 3.4 路由重定向 3.5 滚动还原 3.6 路由守卫 3.7代码分割 3.8 withRouter 3.9 其他hooks react-router-dom react-router-dom文档地址: https://reacttraining.com/react-router/ 1. 安装 r

  • Vue的路由动态重定向和导航守卫实例

    根据vue官方文档,对于重定向有详细的示例,但是关于使用方法动态重定向的描述却不多,重定向部分的描述如下: 重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由: const router = new VueRouter({ routes: [ { path: '/a', r

随机推荐