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}}" >

巴特西

Vue-router导航问题

最新文章

热门文章