大家好，欢迎来到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
