项目05——Vue项目之页面跳转(路由)

项目05——Vue项目之页面跳转(路由)-智码星河
项目05——Vue项目之页面跳转(路由)
此内容为免费阅读,请登录后查看
0
免费阅读

任何一个应用一定会有页面跳转(切换),以前是用a标签来跳转的,但a标签会刷新页面,不能实现局部跳转。

在vue中,我们不会再使用a标签跳转了,vue提供了路由(router),他就是用来跳转页面的。router是vue的一个包,在创建项目的时候因为选上了路由,所以生成的项目文件里面默认就会有router的文件,且配置好了。我们使用的时候,直接新建页面然后写个路由规则就可以。router路由能够实现局部跳转且不刷新页面。

下面通过在项目中的一个例子来说明路由的用法(不举例子实在太难说明白)

我们创建好项目文件并且清空默认文件之后,在views文件夹里面新建三个页面,分别是aa,bb,cc三个页面,新建页面的时候,一个页面就是一个文件夹,且里面的文件都叫index.vue,为什么要这么写:因为这个页面里面可能还会有别的组件,这些别的组件还要放在本文件夹里面。index.vue意为每一个文件夹里面都应有一个根组件index.vue,而且写成index.vue,在被导入的时候可以省略文件名,直接写文件夹名字即可。

图片[1]-项目05——Vue项目之页面跳转(路由)-智码星河


然后,在每一个页面里面写个文字用来区分组件哪个是哪个,注意,template标签下必须有且只有一个跟标签,这里是div标签,不写就报错,从这一点也可以看出,我们建的页面都是组件

图片[2]-项目05——Vue项目之页面跳转(路由)-智码星河

现在要切换的页面就准备好了,此时打开项目啥也没有,因为页面创建好了,没有路由肯定不会显示,因为项目始终只显示App.vue这一个组件,那么我们就要通过路由把这三个页面让App.vue显示出来。

找到项目的路由文件(router下的index.js),打开此文件,里面有一个routes的数组,在这个数组里面写路由规则,每一个路由规则都是一个对象,路由规则是什么:就是当路径为xx时显示xx组件,具体写法就是(这个写法只能记住):

图片[3]-项目05——Vue项目之页面跳转(路由)-智码星河

这句路由的意思是,当路径为/aa时,展示views文件夹下的aa组件。
注意:这个写法直接就带有路由懒加载的功能。
然后进入项目在地址栏加上/aa 查看,发现没有效果,因为路由是写好了,你没告诉他在哪里展示,那么在哪里展示?之前说过,App.vue是唯一显示的组件,肯定也只能在App.vue里面展示,展示如何写:写一个路由占位符router-view标签即可,这个标签就代表显示的组件内容(其实如果你不删除App.vue里面的默认代码,它本来就有路由占位符)

图片[4]-项目05——Vue项目之页面跳转(路由)-智码星河

此时,进入浏览器在地址栏后面加上/aa 回车,aa组件就展示出来了

图片[5]-项目05——Vue项目之页面跳转(路由)-智码星河

aa组件好了,那么其他的都一样了,在路由文件里面配置好路由规则即可。

图片[6]-项目05——Vue项目之页面跳转(路由)-智码星河

然后在浏览器地址栏中加上/bb就显示bb组件,加上/cc就显示cc组件内容。
到此,页面路由就写好了,实现页面的跳转了。

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
文章版权声明 1 本网站名称: 智码星河
2 本站永久网址:https://wx234.cn
© 版权声明 文章版权归作者所有,未经允许请勿转载。

WX234.CN
喜欢就支持一下吧
点赞14赞赏 分享打赏
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容