大家好,欢迎来到IT知识分享网。
组件之间如何切换?这个问题想过没有?因为是SPA单页面文件,所以对于组件的来回切换时之前占了一个坑的(router-view),这个坑一定是组件来填满,那么组件如何切换呢,今天咱们来学习vue-router。
他的基本步骤是这样的:
1 引入vue-router 2 创建router实例,规划路由 3 创建不同组件 4 使用router-view渲染不同组件
那么直接来写代码吧:
1 首先是vue三部曲,创建一个html文件,然后引入vue,创建div,创建vue实例
2 安装vue-router
命令行 npm i vue-router -S 安装之后就可以用了
3 引入vue-routerjs
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
4 实现了一个基本的布局,头部和左右部分
写完css之后的效果图:
然后规划一下路由
其中左边为菜单项,可以规划为router-link(其实相当于一个a标签),但是它神奇就是神奇在通过他可以影响主界面的router-view
- <router-view>是一个占位符,用对应的组件来替换
- <router-link>指定跳转的URL地址
挂载router对象到vue实例中
const router = new vuerouter{}
在router对象中主要包含route路由规则,
一条路由规则一般由3部分组成
- path: URL地址
- name: 别名(可以不写)
- component: 对应的组件, 一个对象(组件参数)
routes是路由规则, 是一个数组
每个元素都是一条具体的路由规则(route), 使得路由和组件绑定.
因此在vue内部使用this.$route表示路由规则
使用this.$route.params获取路由规则中的参数
当URL匹配到路由规则时, 使用对应的组件替换<router-view>中的内容
现在理一下,其实就是在引入vue-router之后,创建router对象,在对象里面设定url和组件路径,然后挂载,只要是挂载之后,通过router-link就可以跳到相关的组件了。
创造两个组件,然后也挂载在vue上面,这样就可以根据路由去跳组件了
切记:如果组件是其他文件的,按照文件引用就可以了
那么vue-router就写到这里了,下期咱们来聊聊vue中的v-for和v-if,我是黑胖哥,如果对您有帮助,请关注点赞评论转发,谢谢!
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/39197.html