想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看。
昨天我们聊了一下vue的组件间传值,今天来讨论下我遇到的第二个问题组件间跳转。在不使用前端框架的时候,如果我们要点击菜单跳转到指定页面,一般来说可以使用标签或者在页面中嵌套iframe。前者可以改变页面路径或者通过锚点来跳转到页面指定位置,后者则是在页面中嵌套一个子页面,可以部分刷新,改变内容。不过HTML5已经不再支持iframe了,所以要做到部分页面跳转等功能,我们可以借助一下vue。
前言
在vue这边,如果要跳转页面一般是借助vue-router的,也就是路由。但是路由跳转到不同地址时,会使得页面刷新。如果页面中包含Header、Footer等不需要刷新的组件,用户可能还是会看到闪了一下,或者加载时候的空白。所以我们需要在不改变路由路径的情况下,替换页面部分组件。我找到的方法是使用标签。如果有大佬有其他方法可以留言告诉我~
接下来我们就从这两种情况分别谈一谈。
vue-router
vue的一大特色就是文档写得很好,许多问题我们都可以在文档上找到答案。对于vue-router也是有一个很完善的文档的,大家可以先去那边看看。安装的步骤我这边也不提了。https://router.vuejs.org/zh-cn/
我就举一下我做的测试系统的例子。在安装完成之后我们在src文件夹下创建一个router.js的文件。如果你使用的是我之前推荐的iView的工程,那这个文件已经建好了。PS:router.js这个文件的名字其实可以根据你的喜好来改的,只要你在main.js中引入的时候和这个名字一致就可以了。不过狐狸还是推荐你用带有router字眼的文件名,这