vue小项目总结与笔记【九】——vue中的动态路由

 

前面说到了路由配置 vue小项目总结与笔记【二】——vue的单文件组件模板和路由，但其路由导航功能是不能传递参数的，是静态路由。

静态路由：

routes: [{
      path: '/',
      name: 'Home',
      component: Home
    }]

 

而能传递参数的路由模式，由于可以传递参数，所以其对应的路由数量是不确定的，故称之为 动态路由。那么动态路由如何传递参数？

在参数名前面加上 : ，然后将参数写在路由的 path 内.如下：

routes: [{
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/city',
      name: 'City',
      component: City
    }, {
       // 动态路由参数  ：id
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }]

 

这样定义之后，vue-router就会匹配到所有的

/detail/1, /detail/2, /datail/3......

在<router-link> 我们加入一个 params 属性来指定具体的参数值

        <li>
          <router-link :to ="{params :{id:1}}" >
            <div>首页</div>
          </router-link>
        </li>    

这时候对应的网址是http://localhost:8080/detail/1。

 

如何把参数读取出来？

路由参数是被设置到 this.$route.params 中的，想取到这个值，用 this.$route.params.id 就可以了。

 

例如我想根据点击的景点名，进入对应的景点详情中，

    getDetailInfo () {
            // 相当于 /api/detail.json?id=this.$route.params.id'
            axios.get('/api/detail.json', {
                params: {
                    id: this.$route.params.id
                }
            }).then(this.handleGetDataSucc)
    }    

利用这个取到的id值，去筛选ajax获取到的data数据，就可以实现数据对应了。即：点击第一个，跳转到链接/detail/1,数据也是第一条……