vue-router路由组件的使用
今天我们来学习router" title="vue-router">vue-router路由插件的使用，先来了解一下什么是vue-router。由于 Vue.js 是一个视图层框架，并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含页面的跳转以及通信功能，而是使用vue-router路由插件（页面跳转）和axios（通信）实现的。在前后端分离的模式下，原本由后端来做的重定向和转发的事情就交给前端来做了。
搭建项目
首先我们要搭建一个vue项目，详细的搭建步骤在我的上篇博客有写道，这里不再赘述。不会搭建vue项目的小伙伴可以先去看我的上篇博客：https://blog.csdn.net/weixin_46214451/article/details/106771944
我这里已经搭建好了一个项目，启动测试一下有没有问题，我这里已经正常启动。
安装
然后我们安装vue-router插件，先Ctrl+C终止项目。在终端用npm/cnpm命令进行安装：
cnpm install vue-router --save-dev（想快速安装的用cnpm如果报错再用npm）
我这里用cnpm安装成功
使用
把这里没用的都删掉，（多余的东西会干扰我们学习）
这两个也删掉，选中右键Delete
然后我们在里面写一个我们自己的Main页面
注意看我写的注释，重点！！！
vue中每一个页面都是一个组件，我们写好的页面需要导出（export），在需要用的地方在导入(import)，后边我会在router下的index.js里导入main页面
再src目录下新建一个router文件夹,用来管理我们的路由。
再router文件夹下新建一个index.js文件，这里的index代表主配置文件。
编写我们的主配置文件，还是注意看我的注释，我之所以放截图而没放源代码是因为我建议这里全手写，不要偷懒。
Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式，因为我比较讨厌那个‘#’所以使用 mode:‘history’; 这个在实际应用中要和后端相对应。
去main.js文件（App.vue下边那个）中配置一下我们写的路由，就两句话
最后在App.vue（程序主入口）下配置一下
注意：
重新启动项目测试一下，终端输入命令：npm run serve
因为vue是组件化开发，会直接再原页面加载新页面
下一篇我会更新ElementUi的用法，一个强大的UI组件库，完爆Bootstrap。先放上效果图，想学的关注我，感谢支持。
以上是 vue-router路由组件的使用 的全部内容， 来源链接： utcz.com/z/378139.html
