[vue]如何动态的设置route path？（vue-router）2.0

Question

学习VUE的小白一枚。
开发环境为vue 2.0+vue-router 2.0。所有路由子页面都是.vue文件，统一在route-config.js里面做路由配置。

现在有个简单的功能，就是一个动态生成一个list，点击list item之后，跳转到detail页面。

1. route-config.js

import MyAppList from './components/myApp/AppList.vue';
import MyAppDetail from './components/myApp/AppDetail.vue';

export default [
    ...
    {
        path: '/myApp/list',
        name: 'myAppList',
        component: MyAppList
    },
    {
        path: '/myApp/detail/:id',
        name: 'myAppDetail',
        component: MyAppDetail
    },
    ...
]

1. AppList.vue

<template>
    ...
    <ul>
       <li v-for="app in appList">
            <router-link to="/myApp/detail/"+{{app.id}}>{{app.name}}</router-link>
       </li>
    </ul>   
     ...       
</template>

这样做不行，"/myApp/detail/"+{{app.id}}不能被编译成/myApp/detail/1。我猜测是router-link的标签导致的...

那么，给li加事件呢？可是，通过this.$route拿不到可以发生路由跳转的事件接口：

求大神解答！多谢了。

Answer 1

这样写：

<router-link :to="'/myApp/detail/' + app.id">{{app.name}}</router-link>

Answer 2

我大概明白楼主的意思了，一个列表页面，点击之后想进入到产品详情页面。这样的需求你可以使用动态路由匹配,
比如说：routerConfig的定义文件

export default{
    //list页面
    '/list':{
        name:'list',
        component:require('./views/list')
    },
    //详情页面
    '/item/:id':{
        name:'item',
        component:require('./views/item')
    }
}

文档参考https://github.com/vuejs/vue-...
https://github.com/vuejs/vue-...