Vue学习笔记之Vue中的路由使用

有目标就不怕路远。年轻人.无论你现在身在何方.重要的是你将要向何处去。只有明确的目标才能助你成功。没有目标的航船.任何方向的风对他来说都是逆风。因此,再遥远的旅程,只要有目标.就不怕路远。没有目标,哪来的劲头?一车尔尼雷夫斯基

导读:本篇文章讲解 Vue学习笔记之Vue中的路由使用,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

Vue学习笔记之Vue中的路由使用

路由嵌套

在router.js中,添加对应路由:

Vue学习笔记之Vue中的路由使用

在html中添加路由view:

Vue学习笔记之Vue中的路由使用

对应的跳转路由地方,添加router-link:

Vue学习笔记之Vue中的路由使用

路由重定向

在路由配置文件中,使用redirect即可。

Vue学习笔记之Vue中的路由使用

对应的页面:

Vue学习笔记之Vue中的路由使用

路由传递参数

1、参数传递方式一

  1. 路由中配置参数:

Vue学习笔记之Vue中的路由使用

    2. 传递参数:

Vue学习笔记之Vue中的路由使用

   3. 页面接收参数:

Vue学习笔记之Vue中的路由使用

界面显示效果:

Vue学习笔记之Vue中的路由使用

2、参数传递方式二

1. 配置路由参数

Vue学习笔记之Vue中的路由使用

2. 传递参数

Vue学习笔记之Vue中的路由使用

3. 获取参数

Vue学习笔记之Vue中的路由使用

效果:

Vue学习笔记之Vue中的路由使用

方式一:传递参数单一。

方式二:可以传递多个参数。

路由守卫,钩子函数

进入路由执行的方法

准备进入路由前的方法:

beforeRouteEnter: (to, from, next) => {
    console.log("准备进入页面")
    next(
        console.log("进入页面了,执行某个函数")
    );
}

Vue学习笔记之Vue中的路由使用

控制台输出:

Vue学习笔记之Vue中的路由使用

离开路由执行的方法

beforeRouteLeave: (to, from, next) => {
    console.log("准备离开页面")
    next(
        console.log("离开页面了,执行某个函数")
    );
}

Vue学习笔记之Vue中的路由使用

Vue学习笔记之Vue中的路由使用

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/134837.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!