Vue_路由配置&路由数据获取

const routes = [
  {
    path: '/a/b/c/d/e/f',  // 这个匹配到的就是 host#/a/b/c/d/e/f 
  }, {
    path: '/', // /
  }, {
    path: '/demo' // /demo
  }, {
    path: '/demo/:id' // /demo/任意值
  }, {
    path: '/demo/:id/a/:b'  // /demo/任意值/a/任意值
  }
]

// path和component是一一对应的，当我们方位对应的url时，我们会匹配到自己设置好的path。那么component对应的组件就会出现在 #app下<router-view>中

动态路由

组件一致，数据不一样时，我们需要配置动态路由或者query参数

/ /order /discover /profile 虽然这几个url类似，都属于 / 下，但是这几个对应的页面是四个页面（四个组件），因此不能用动态路由

/all /good /share /job /ask 这几个url都属于 / 下，而且对应的组件中的样式一致。所以可以使用动态路由

动态路由的值需要通过this.$route.params.xxx 获取

获取数据

query参数

1. 在create中获取url中的参数
   this.$route.query.xxx

2. 根据获取到的参数请求数据

3. 将请求到的数据设置给data

4. data会自动渲染到页面上

params参数

1. 在created中获取url中的参数
   this.$route.params.xxx

2. 根据获取到的参数请求数据

3. 将请求道的数据设置给data

4. data会自动渲染到页面