JSEclipse安装后无法打开js文件_如何为VUE安装路由？

vue项目在初始化时可以自主安装路由，如果当时没有安装的话，就需要在初始化之后进行配置，本文将讲解如何配置vue路由。

首先创建一个项目，路由安装选择no。

然后用pycharm或者其他IDE工具打开这个项目，打开项目后不要急于运行，我们先配置一下项目运行的快捷方式。

我们进行配置之后，就可以使用IED来运行项目。下一步我们要删除APP.vue中的原有样式。

红框内的删除

然后开始安装路由。

npm i vue-router -s

下一步注册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:[      ]})

下一步将路由对象注册到main.js中，加上下来两行文字。

然后在APP.vue中将路由视图添加到模板上，并创建一个home模板测试。

这里是首页

红线标注的是后面添加的内容，然后运行项目成功。

再新建一个用户组件测试一下。

新组件测试成功，有了路由之后，每次有新的组件，只要在路由中新注册一个url就可以浏览器中访问了。

下面我将介绍vue路由的两个实用功能，页面跳转和获取url参数。

在Home.vue中添加如下代码

打开/user可以做到无刷新跳转，在原有的代码中继续修改

用户中心

在user.vue添加：

这里是用户组件 {{$route.query.num}}

再次访问用户组件得到这样的结果。

页面跳转使用的是this.$router对象，这个对象相当于是原生js中的location对象，除了可以在html页面跳转，在js中使用this.$router.push()也可以实现页面跳转，手机url参数使用的this.$route对象，除了可以手机查询字符串参数外，还可以收集url参数。