vue项目在初始化时可以自主安装路由,如果当时没有安装的话,就需要在初始化之后进行配置,本文将讲解如何配置vue路由。
首先创建一个项目,路由安装选择no。
![9f19843826130065898d191e4668226f.png](https://i-blog.csdnimg.cn/blog_migrate/30c5d70a669ec822107844edb0013f17.jpeg)
然后用pycharm或者其他IDE工具打开这个项目,打开项目后不要急于运行,我们先配置一下项目运行的快捷方式。
![25415af42f83feba80832308d5964cd3.png](https://i-blog.csdnimg.cn/blog_migrate/ba95790a0bc193ab915c78b08a2e0c7c.jpeg)
我们进行配置之后,就可以使用IED来运行项目。下一步我们要删除APP.vue中的原有样式。
![5997fb3f133f46696106310d21b1705d.png](https://i-blog.csdnimg.cn/blog_migrate/a718773b86737c3b57a1c47feb745dd3.jpeg)
红框内的删除
然后开始安装路由。
npm i vue-router -s
![d3bbd994f8190eab8893fe07ee3e098a.png](https://i-blog.csdnimg.cn/blog_migrate/7d590dc219a93ebc3b76b8fe339a4dd4.jpeg)
下一步注册vue路由,在src目录下新建一个文件件routers,在routers目录下新建文件index.js,在index.js中写入下面的代码。
import Vue from "vue"import Router from "vue-router"Vue.use(Router);export default new Router({ mode:"history", routes:[ ]})
![19792cb8105358506c6cf7c1a86ccb5f.png](https://i-blog.csdnimg.cn/blog_migrate/ee759823fbf811c9a6228a7df070c9cb.jpeg)
下一步将路由对象注册到main.js中,加上下来两行文字。
![d903df0bcc6839a307f0736bc58b410f.png](https://i-blog.csdnimg.cn/blog_migrate/3b23396c0dd98c5780745b6b5b0d6db8.jpeg)
然后在APP.vue中将路由视图添加到模板上,并创建一个home模板测试。
这里是首页
![c81c5d859e3597d76aec6286044adbb6.png](https://i-blog.csdnimg.cn/blog_migrate/b74daf9cfc15fde044680048659edb7a.jpeg)
![6ebbe6606842f11dd171a8ada2be7bc3.png](https://i-blog.csdnimg.cn/blog_migrate/6e0cb748a8e797a2d74ad9c0b3081233.jpeg)
红线标注的是后面添加的内容,然后运行项目成功。
![fb45f7a64afb13725e282227470e9502.png](https://i-blog.csdnimg.cn/blog_migrate/02eca1c492c870ca78c186d108ef899f.jpeg)
再新建一个用户组件测试一下。
![46d0dbe00028b7a47edb6561f473459f.png](https://i-blog.csdnimg.cn/blog_migrate/ad6e641633cd1bffb3e1ac6387c8cc5e.jpeg)
![ca40a87f98dcf87e7eb45b2d6abf78f2.png](https://i-blog.csdnimg.cn/blog_migrate/a43f050d2693512b9efd1b60dddb26a1.jpeg)
![03a1a02ca6cccac84964f6bf269ccfbf.png](https://i-blog.csdnimg.cn/blog_migrate/f35c52db90a59ab4486d2d8b46f0916f.jpeg)
新组件测试成功,有了路由之后,每次有新的组件,只要在路由中新注册一个url就可以浏览器中访问了。
下面我将介绍vue路由的两个实用功能,页面跳转和获取url参数。
在Home.vue中添加如下代码
![1731d7e0fae0e5d98b4cce9b5b2ec139.png](https://i-blog.csdnimg.cn/blog_migrate/45f086fd448f50bbbd4281a9e8236806.jpeg)
![f4b83fa6a47d208d1833dbd705f4ecdc.png](https://i-blog.csdnimg.cn/blog_migrate/55b4f0348ea289025e0c264801799e3e.jpeg)
打开/user可以做到无刷新跳转,在原有的代码中继续修改
用户中心
在user.vue添加:
这里是用户组件 {{$route.query.num}}
再次访问用户组件得到这样的结果。
![e11aa72abce4e2bdb5c884ad5ccc844e.png](https://i-blog.csdnimg.cn/blog_migrate/84b9a7e2f13567dac6131280ac630a57.jpeg)
页面跳转使用的是this.$router对象,这个对象相当于是原生js中的location对象,除了可以在html页面跳转,在js中使用this.$router.push()也可以实现页面跳转,手机url参数使用的this.$route对象,除了可以手机查询字符串参数外,还可以收集url参数。