router基础用法介绍

2023-12-01 阅读23 评论0 喜欢0

今天学习了Vue中通过router-link 和 router-view 来实现页面直接的跳转，个人觉得它远比html中通过url方便快捷的多，简单的介绍一下它的具体用法吧。

首先我们需要构建一个简单的页面

这里我创建了三个页面，Router是我们的主页面，Router1和Router2是我们要通过router-link来跳转的页面。（这里要注意的是这些vue的命名一定要大写开头，我也不是很清楚为什么，但是如果不是大写开头，在配置路由的时候会出很多麻烦）

然后我们要在router/index.js 中进行路由配置，这些应该是很基础很简单的事情。

然后我们来看一下主界面里面有些什么内容：

这是一个很简单的页面，主要来看router-link标签里面的内容，首先是to='/router'，这里的to表示的就是要跳转的页面的路由地址，可以看出来第一个对应的是第一个页面，第二个点击跳转的是第二个页面，这里的tag表示的是你所设置的这个router所属的类型，这里我们设置成为了按钮，你也可以设置成div等其他形式，后面的是active-class，这里是指的，当你点到这个router之后它会赋予的class名称，如果不点就不会有，而我们知道，active-class 和普通的class 是可以同时存在的，所以这里又设置了class的名称。

再来设置我们要跳转到的页面

为了让router-link跳转实现，我们要在你所要跳转的页面设置router-view来接受router-link的跳转，可以当作固定形式，二者缺一不可，这是我们写的两个简单的页面，需要什么自己内容，可以自行添加。

让我们来看一下实现的效果，这是第一个router页面

点击下面的第一个按钮跳转，就可以跳转到第一个页面，

点击第二个按钮跳转，就可以跳转到第二个页面。

看到这里想必最简单的router跳转方法大家应该掌握了吧。

叶紫资讯

关注

不只是科技数码，还有一些有趣的生活分享给大家

文章

0
浏览

0
获赞

0

赞一个、收藏了!

分享给朋友看看这篇文章

router基础用法介绍

叶紫资讯

相关标签

热门推荐