【Vue】路由 - 基础使用方法

作者: 德育处主任 | 来源:发表于2019-03-25 07:09 被阅读6次
    微信订阅号:Rabbit_svip


    在前端实现路由跳转的网站,也叫单页面网站。

    要实现单页面网站,其实是需要前后端配合的。在服务器端,不管url请求哪个页面,都统统返回指定页(通常是index.html)。

    在前端实现路由跳转能很大程度上减轻服务器压力,也能提高项目的性能。

    最明显的就是用户在填写表单,如果不小心点错了别的按钮,跳转到别的页面,当用户返回表单页时,刚刚填写过的信息又要重新填写一遍。如果想要实时临时保存用户填写的信息,在后端处理会有点麻烦,而且需要消耗网络资源。

    如果在前端实现路由跳转,这个问题将非常容易解决。

    以上是前端路由的部分有点。



    本节关键字

    • <router-link>
    • <router-view>
    代码如下

    这段代码已事先现引入 vue.jsvue-router.js

    微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip

    仔细观察 URL,是有切换的,但URL旁边的刷新按钮是没变化的。

    这就是前端路由与后端路由的一个区别。

    路由的操作可以理解为不断切换要显示的组件。

    路由部分,先定义一个数组,用来存放路由信息的。


    微信订阅号:Rabbit_svip

    上面代码用“routes”来存放。

    • path 代表URL上路劲
    • component 代表对应的组件


    微信订阅号:Rabbit_svip

    VurRouter是vue-router.js暴露出来的一个构造器。

    里面放设置好的路由参数即可。


    微信订阅号:Rabbit_svip

    在HTML部分

    • <router-link> 代表路由的链接(默认是a标签)
    • to 代表要去的路由地址
    • tag 里面可以指定这个路由链接是什么html标签(默认是a标签)
    • <router-view>就是用来展示组件内容的容器。

    相关文章

      网友评论

        本文标题:【Vue】路由 - 基础使用方法

        本文链接:https://www.haomeiwen.com/subject/jiymvqtx.html