如何为VUE安装路由?（安装vuerouter）

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模板测试。

<template>
  <div class="home">
    这里是首页
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style scoped>

</style>

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

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

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

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

在Home.vue中添加如下代码

<router-link to="/user"></router-link>

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

<router-link to="/user?num=100">用户中心</router-link>

在user.vue添加：

<template>
    <div>
      这里是用户组件
      {{$route.query.num}}
    </div>
</template>

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

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