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

问题描述

问 题

学习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拿不到可以发生路由跳转的事件接口：

求大神解答！多谢了。

解决方案

这样写：

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

这篇关于vue.js - [vue]如何动态的设置route path？（vue-router）2.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！