唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > Vue.js项目Vue-Router有多少种路由重定向方式？

Vue.js项目Vue-Router有多少种路由重定向方式？

2019-04-29 分类：Vue.js专区 作者：管理员 阅读（1551）

vue.js路由有很多有趣的东西，咱们在此来大致总结下Vue-Router中到底有哪些方式可以渲染404组件页面

第一种

通过redirect

1
2
3
4
5
6
routes: [
    {
        path: '*',
        component: undefined
    }
]

第二种

通过redirect - 路由重定向,值得注意的是：当前这个undefined必须是你在上面配置过的地址

1
2
3
4
5
6
7
8
9
10
routes: [
    {
        path: '/undefined',
        component: undefined
    },
    {
        path: '*',
        redirect: 'undefined' //上面配置过，后面才能用
    }
]

当前方式你还能这么写

1
2
3
4
5
6
7
8
9
10
routes: [
    {
        path: '/undefined',
        component: undefined
    },
    {
       path: '*',
       redirect:{path:'/undefined'}
    }
]

第三种

对象通过name别名写法，同样，还是通过上面配置过的路由地址进行跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
routes: [
    {
      path: '/undefined',
      name: 'nofind',
      component: undefined,
      meta:{
        login:true,
        title:'undefined'
      }
    },
    {
       path: '*',
       redirect:{name:'nofind'}
    }
]

第四种

动态设置重定向目标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
routes: [
    {
      path: '/undefined',
      name: 'nofind',
      component: undefined,
      meta:{
        login:true,
        title:'undefined'
      }
    },
   {
    path: '*',
    redirect:(to) => {
        /*console.log(to) //to，目标路由对象，当前访问的目标路由信息
        return '/undefined'//重定向到一个上面配置过的路由地址*/

        //当然，既然说是动态设置，那么肯定不能向上述那样简简单单return完事，如下：
        if(to.path == '/abc'){
          return '/home' //如果目标路径是abc，那么我重定向到首页home
        }
        return '/undefined' //其他正常时候跳转到404
      }
   }
]

不仅仅只是上面这些方式，其实我们还有别的方式也可以进行跳转重定向，小伙伴，比如通过钩子函数

第五种

通过全局路由钩子函数去配置

1
2
3
4
5
6
7
8
9
10
11
// 路由钩子函数
//beforeEach即将要进某个路由时候
router.beforeEach((to, from, next)=>{
  if(to.meta.login){
    next(true) //false时候阻止路由执行，默认是true
    // next('/login') 在这里判断到后去跳到登录页面，先要在路由里配置
    console.log("当前是个404组件，需要登录访问，其实你还没有登录，不过看你可怜兮兮，我暂时让你旁观！")
  }else{
    next()
  }
})
1
2
3
4
5
6
7
8
9
//afterEach进入组件之后，当然，就没有next了，已经进入了组件
router.afterEach((to, from)=>{
  if(to.meta.title){
    //当进入了组件后，如果meta里有title就设置title(注意，这个位置document前面需要加上window才能访问)
    window.document.title = to.meta.title;
  }else{
    window.document.title = '世上最完整的vue-router案例'
  }
})

第六种

通过局部路由钩子函数去配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
routes: [
    {
      path: '/document',
      name: 'document',
      components: { //多个组件渲染到一个路由(命名视图技术)
        default:document, //默认渲染到router-view没有name的路由
        slide:slide
      },
      beforeEnter(to,from,next){
        //局部路由钩子函数同样有beforeEnter/afterEnter，to可以监听即将到达的路由信息
        console.log("路由钩子函数监听到：进入到document组件")
        next(true)
      }
    }
]

通过上面这么多的方式，你基本上可以胜任绝大多数vue.js项目路由重定向需求

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(2) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
赏 2

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签：

上一篇：

下一篇：

你可能感兴趣

共 0 条评论关于"Vue.js项目Vue-Router有多少种路由重定向方式？"

博客简介

唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与，主题源码 

最近更新

随机文章

热门标签

caniuse兼容性 DaoVoice CDN大全 犸良动画 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线 lodash.js 视频压缩 vue视图更新 windows激活 机场客户端 Eruda

精彩评论

  • 江吟辞（1周前 (06-29)）

    好难坚持啊，我还没毕业，不知道啥时候才能像您一样厉害

    评：碎言碎语
  • 和我、恋爱吧（1周前 (06-29)）

    怎么没见你更新呢，比较忙吗

    评：碎言碎语
  • 游离（1周前 (06-29)）

    站主，你好！请教一下，前台的pc 端和移动端，你是怎么实现响应式的呢？媒体查询的同时写两套样...

    评：碎言碎语
  • 권지용（1周前 (06-29)）

    最近在学习前端，看了博主很多文章，收益匪浅，感谢大佬

    评：碎言碎语
  • 白君也（1周前 (06-28)）

    哇 自己制作的吗 在哪学的技术啊 好厉害

    评：碎言碎语
  • 管理员（3周前 (06-16)）

    时间区间问题，因为目前是2020年，你所选不可能超出这个时间吧，当然，代码是根据你的业务来，...

    评：js时间戳完美转换成阴历农历格式

友情链接

他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！申请交换友链

站点统计

  • 文章总数： 258 篇
  • 草稿数目： 0 篇
  • 分类数目： 16 个
  • 独立页面： 6 个
  • 评论总数： 902 条
  • 链接总数： 17 个
  • 标签总数： 459 个
  • 注册用户： 8220 人
  • 访问总量： 9212079 次
  • 最近更新： 2020年7月3日
服务热线：
 173xxxx7240

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息