Vue-cli3项目加入Vue-router路由

学习的是Vue2的路由：
1，位于src/目录下，新建router.js文件
2，router.js文件中，引入vue-router模块，然后引入Vue使用VueRouter模块

import VueRouter from 'vue-router'
import Vue  from 'vue'
Vue.use(VueRouter)

为啥要use下呢?。。。
3，router.js文件中，然后定义router路由，并且配置路由和组件之间的关系

const routes = [
    { path: '/display', name:"display",component: Display },
    { path: '/display/:showid/:requestid', name:"display",component: Display },
    { path: '/', redirect: '/collect' }
  ]
  
  //配置路由和组件之间的关系
  const router=new VueRouter({
    mode: 'history',
      routes
    })

注意路径带参数的形式path写成：

path: '/display/:showid/:requestid'

带参数可以使用url直接跳转到lcoalhost/display/eer/123
路径不带参数的形式是:

 path: '/display'

不带参数，url是lcoalhost/display，传参调用不了
即使路径不带参数，再调用的时候也是可以传入参数的：

this.$router.push({ name: 'display', params: { showid: this.showid,requestid:this.request_id }})

参数的获取：
Vue模板中获取参数：

$route.params.showid

组件中获取参数，加上this

this.$route.params.showid

4，router.js文件中，最后默认导出定义的组件实例router

    export default router

5，再main.js中，导入组件实例，配置到Vue实例中去

import Vue from 'vue'
import router from "./routers"
new Vue({
  render: h => h(App),
  router,
  $
}).$mount('#app')