Vue动态路由和get传值

文章目录

    • 动态路由
      • 1. 配置动态路由
      • 2. 在对应的页面
    • get传值
      • 1.配置路由
      • 2.在对应的页面

动态路由

1. 配置动态路由

routes:[
    {path: '/user/:id', component: User}
]

2. 在对应的页面

<ul>
    <li v-for="(item,key) in list)">
        //{{key}}--{{item}}
        //动态路径参数,以冒号开头
        <router-link  :to="'/user/'+key">{{key}}--{{item}}</router-link>
    </li>
</ul>
this.$route.params获取动态路由的值

get传值

1.配置路由

routes:[
    {path: '/user', component: User}
]

2.在对应的页面

<ul>
    <li v-for="(item,key) in list)">
        //
        //动态路径参数,以冒号开头
        <router-link  :to="'/user?id='+key">{{key}}--{{item}}</router-link>
    </li>
</ul>
this.$route.query获取路由的值

你可能感兴趣的:(Vue)