3. Vue 动态路由匹配

白怀宇

于 2020-06-13 13:14:36 发布

阅读量464

点赞数

分类专栏： Vue2 学习笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/b342216980/article/details/106730987

版权

Vue2 学习笔记专栏收录该内容

45 篇文章

订阅专栏

本文介绍Vue.js中如何使用动态路由匹配来解析URL参数，通过示例展示了如何定义动态路径参数并获取传递的ID值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    Vue 动态路由匹配 
 动态路由匹配可通过URL进行参数的解析 <div id="app">
  <p>
    <router-link :to="/user/+user_id">get user id</router-link>
  </p>
  <router-view></router-view>
</div> 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})
const app = new Vue({
    router,
    data:{
        user_id: 123
    }
}).$mount('#app')
 

                