VUE 路由

原稿：https://segmentfault.com/a/1190000016662929

1、路由的基本概念

（1）route：一条路由

{path:'/process',component:Process}

（2）routes：一组路由

const routes = [
  {path:'/process',component:Process},
  {path: '/process',component: Process,}
]

（3）router：可理解为一个容器，一种机制，来管理一组路由；一般来讲，route进行了URL与函数的映射，当接收到一个函数，到路由映射表中去查找相应的函数，这个过程由router来管理。

//Router容器
export default new Router({
  mode: 'history',
//一组路由
  routes: [
      {
          path: '/',
          redirect: '/process'
      },
      {
          path: '/workBench',
          component: () =>
              import ('@/modules/workBench/index.vue'),
          redirect: '/process/list/waitDeal',
          name: 'workBench',
          meta: {
              title: '工作台'
          },
          children: [
            {
                  path: '/process',
                  component: Process,
                  name: 'process',
                  redirect: '/process/list/waitDeal',
                  meta: {
                      title: '我的流程'
                  },
                  children: [{
                      path: 'list',
                      component: processList,
                      redirect: '/process/list/waitDeal',
                      name: 'processList',
                      children: [
                          {
                              path: 'draft',
                              component: draft,
                              name: 'draft',
                              meta: {
                                  title: '草稿'
                              },
                          },
                          {
                              path: 'myLaunch',
                              component: myLaunch,
                              name: 'myLaunch',
                              meta: {
                                  title: '我发起的'
                              },
                          },
                      ]
                  },]
              },
              {
                  path: '/startProcess',
                  component: () =>
                      import ('@/modules/workBench/startProcess/'),
                  name: 'startProcess',
                  meta: {
                      title: '发起流程'
                  },
              },
          ]
      }
  ]
})

2、$route与$router

（1）$route：是当前router跳转对象里面的，可以获取name,path,query,pramas等参数

（2）$router：是VueRouter的实例，想要导航到其他URL地址，使用$router.push()方法；想要返回上一个history使用$router.go(-1)方法。$router用来管理路由的跳转。

3、路由跳转

（1）手写完整的path，这种方式需要在路由中做配置；

this.$router.push({
  name: "personalSealAppli",
  params: {
    breadParams: [
      { path: "/workBench/", name: "工作台" },
      { path: "/startProcess", name: "发起流程" }
    ],
    id: this.$route.query.id
  },
  query: {
    id: this.$route.query.id,
    tag: 1
  }
});
//配置路由
{
  path: '/personalSealAppli',
  component: () =>
      import ('@/modules/personalSealAppli/index.vue'),
  name: 'personalSealAppli',
  meta: {
      title: '个人用章申请'
  },
},

（2）接收参数的方式是this.$route.params.xxxxx。

（3）可以用params传递：this.$router.push({name:'Login',params:{id:'leelei'}})//不带参数 变成 ip/login

 　　也可以用query传递：this.$router.push({path:'/login',query:{id:'leelei'})//带查询参数变成 ip/login?id=leelei；带斜杠/代表从根目录出发，不会嵌套之前的路径, 接收参数：this.$route.query.id

（4）query传参是针对path的，params传参是针对name的。接收参数的方式都差不多：this.$route.query.和this.$route.params.

　　注意这只是跳转url，跳转到这个url显示什么组件，得配置路由。router跳转和<router-link>标签跳转，规则差不多。

4、属性

• $route.path 
  字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。
• $route.params 
  对象，包含路由中的动态片段和全匹配片段的键值对
• $route.query 
  对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == 'yes' 。
• $route.router 
  路由规则所属的路由器（以及其所属的组件）。
• $route.matched 
  数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
• $route.name 
  当前路径的名字，如果没有使用具名路径，则名字为空。

5、注意

（1）使用query传参，会在浏览器的地址栏看到传递的参数，类似get请求；使用params则不会，类似post请求；

（2）如果提供了path，则params则会被忽略（也就是说如果使用params传参，则一定要是用name）；但是使用query不会出现这种情况，如果使用完整路径和query传递参数，刷新页面不会造成路由传参参数丢失。

（3）router.push和router.replace的区别是：

　　replace不会向 history 添加新记录，而是替换掉当前的 history 记录，即使用replace跳转到的网页‘后退’按钮不能点击。