vuerouter(vuerouter使用)

前端这点事 16 0

认识vue-router

1、概念:vue-router是vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。在使用 vue-router 时,我们需要做的就是把路由映射到各个组件,vue-router 会把各个组件渲染到正确的地方。在vue-router的单页面应用中,页面的路径的改变就是组件的切换。

2、安装环境:cnpm install vue-router --save

3、环境配置:

第一步:导入路由对象,并且调用Vue.use(VueRouter)

第二步:创建路由实例,并且传入路由映射配置

第三步:在Vue实例中挂载创建的路由实例

 

 

使用路由router实例:

 

 

4、使用路由:

第一步,创建路由组件:

 

 

第二步,配置路由的映射,组件和路径的映射关系

 

 

第三步,使用路由,通过<router-link>和<router-view>

<router-view>的作用是界面显示的位置在标签的前面还是后面

 

 

系统运行后:点击home标签

 

 

点击about标签:

 

 

PS:如果需要进入页面时,默认一个页面,则可以增加一个默认值path:'/' 这样在进入的时候,默认是显示home这个页面的内容(即是路由的默认值):

 

 

默认进去就是主页的界面:

 

 

第四步,修改为history模式:

在默认的情况,是通过hash模式,使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。如果我们想改变这个模式,可以在路由中进行模式的配置:

 

 

这样,在页面访问的URL地址中,就是用history的模式来显示URL值了(history模式,这种模式充分利用history.pushState API来完成URL跳转而无需重新加载页面):

 

 

比较两种方式的URL值:URL展示上,hash模式有"#",history模式没有

hash:localhost:8080/#/about

history:localhost:8080/about

第五步,其他知识的补充:

router-link中的to属性是跳转到哪个页面,指定跳转的路径。

1、router-link补充:tag:tag可以指定router-link之后渲染成什么组件,例如tag='li'会被渲染成一个<li>元素,tag='button',则会被渲染成一个按钮:

 

 

2、网页上的返回按钮,是因为默认是pushState,如果不想要这个返回按钮,则可以改为replaceState模式,在router-link的属性中增加 replace 属性即可:replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中(但是vue3.0的版本好像不是通过这个属性去实现的,有待考究)

 

 

3、active-class:当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class(3.0的是router-link-exact-active)

 

 

通过改变这个类的属性,可以简单快捷地实现一些需求,例如:改变字体颜色;当点击某个内容时,该内容改变颜色等,可以通过这个属性值在<style>里去改变:

 

 

运行结果:

 

 

4、通过代码的方式修改路由 vue-router:在模板中不使用router-link来实现页面的调整,可以通过监听点击动作来实现页面的转换,但不能绕过路由去改变地址,需要通过this.$router.push('/')来改变URL值。设置两个按钮:

 

 

然后实现按钮的动作:

 

 

如果不想要这个返回按钮,可以把push用replace来进行URL值的改变:

 

 

标签: Vue

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~