Vue-router导航问题

现在的项目，用的是Vue，但当时用的时候，是边学边做的，上手确实比较简单，但是已经用Vue写了一个项目了，但是感觉对Vue的还是不是很深刻，用的都是比较简单的API，

现在回头看看，有些东西，非常的精巧和实用，现在回顾一下：

1.index

  <ul  @click='godetail'>
      <li v-for="(item,index) in list">{{ index }}.{{ item.content }}</li>
  </ul>

　　循环显示内容的时候，当需要显示index值的时候，index需要再item后面，如果index在item前面会显示item对象

2.params() 动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件，例如我们有一个second组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。

router.js配置

  {
      path: '/second/:id',
      name: 'second',
      component: second
  }

　　vue页面

<p>
    <router-link to="/second/foo">foo</router-link>
    <router-link to="/second/bar">bar</router-link>
</p>
  second {{ $route.params.id }}
<router-view></router-view>

　　在页面上显示的内容

/second/foo 和 /second/bar 都将映射到相同的路由second上，不用写新的vue组件。

3.命名式导航

在官网上介绍了一种命名路由，因为我一直是使用直接push()路径的，最近也在研究它俩的区别，

<router-link  :to="{path:'/content/three',query:{openid:this.openid}}" >

　用下来，个人还是比较喜欢直接push()路径的

例

一级路由里面有first和second路由

  <router-link :to="{ name: 'first', params: {name:1} }">first</router-link>
  <router-link :to="{ name: 'second', params: {name:2} }">second</router-link>
  <router-view/>

　然后first路由里面又有detail和test路由

  <router-link :to="{ name: 'detail', params:{name:1}}">detail</router-link>
  <router-link :to="{ name: 'test', params:{name:2}}">test</router-link>
  <router-view></router-view>

　在路由配置里

  routes: [
    {
      path: '/first',
      name: 'first',
      component: first,
      children: [
        {
          path: 'detail',
          name: 'detail',
          component: detail
        },
        {
          path: 'test',
          name: 'test',
          component: test
        },
        {
          path: '/', //first直接重定向至detail路由
          name: 'detail',
          redirect: 'detail'
        }
      ]
    },
    {
      path: '/second',
      name: 'second',
      component: second
    },
    {
      path: '',
      name: 'first',
      redirect: 'first'
    }
  ]

　　在测试过程中，首次进入，是可以直接重定向至first/detail路由的，但是当我点击second路由，再次点击first按钮时，就无法重定向至detail，只能手动点击，

重定向会失效，所以在使用命名导航时，尽量不要不要涉及父子路由嵌套的关系，最好是导航至某个特定页面。所以不建议大范围使用命名式导航

4.直接路径导航 <router-link :to="{path:'/content/three'}" >

在使用path导航的时候，也遇到一些问题

<router-link :to="{path:'/content/three'}" >

　例如，是这样配置路由的，

 {
          path: 'index',
          name: 'Index',
          component: Index
        },
        {
          path: 'sec',
          name: 'Sec',
          component: Sec,
          children: [
            {
              path: 'repair',
              component: repair
            },
            {
              path: '/',
              redirect: 'repair'
            }
          ]
        },
        {
          path: 'three',
          name: 'Three',
          component: Three
        }

　　在使用repair路由时，有时需要传一些参数，

 因为是从属关系，当触发repair组件的时候，sec组件应该默认处于active状态，但是当query携带参数的时候，页面可以正常显示，
在此时的sec组件却不在active状态，究其原因，就是因为repair
携带了参数，与配置的路由不匹配，所以无法找到父级路由，所以用下来感觉都不是那么完美，也许自己理解的有误，但是目前目前遇到的情况确实是这样。 

　　

<router-link :to="{path:'/sec/repair',query:{id:this.id}}" >

转载于:https://www.cnblogs.com/xumqfaith/p/9129109.html