vue学习--前端路由(四、Vue Router动态路由匹配)

Vue Router动态路由匹配路由

1 动态匹配路由的基本用法

思考：

<!– 有如下 3 个路由链接 -->
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>

// 定义如下三个对应的路由规则，是否可行？？？
{ path: '/user/1', component: User }
{ path: '/user/2', component: User }
{ path: '/user/3', component: User }

应用场景：通过动态路由参数的模式进行路由匹配

var router = new VueRouter({ 
  routes: [    
  // 动态路径参数 以冒号开头    
    { path: '/user/:id', component: User } 
  ] 
}) 
const User = {   
  // 路由组件中通过$route.params获取路由参数   
  template: '<div>User {{ $route.params.id }}</div>' 
} 
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>
 
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
 
    <script>
      const User = {
        template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
      }
 
      const Register = {
        template: '<h1>Register 组件</h1>'
      }
 
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User },
          { path: '/register', component: Register }
        ]
      })
 
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

2 路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

2.1 props的值为布尔类型

const router = new VueRouter({ 
    routes: [       
      // 如果 props 被设置为 true，route.params 将会被设置为组件属性       { path: '/user/:id', component: User, props: true } 
    ] 
  }) 
  const User = {    
     props: ['id'], 
     // 使用 props 接收路由参数    
     template: '<div>用户ID：{{ id }}</div>'  // 使用路由参数   
} 
 <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>
 
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
 
    <script>
      const User = {
        props: ['id'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }
 
      const Register = {
        template: '<h1>Register 组件</h1>'
      }
 
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: true },
          { path: '/register', component: Register }
        ]
      })
 
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

2.2 props的值为对象类型

  const router = new VueRouter({ 
    routes: [       
      // 如果 props 是一个对象，它会被按原样设置为组件属性       
      { path: '/user/:id', component: User, props: { uname: 'lisi', age: 12 }} 
    ] 
  }) 
 
  const User = { 
    props: ['uname', 'age'],     
    template: ‘<div>用户信息：{{ uname + '---' + age}}</div>'   
  } 
 
 <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>
 
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
 
    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }
 
      const Register = {
        template: '<h1>Register 组件</h1>'
      }
 
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },
          { path: '/register', component: Register }
        ]
      })
 
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

3 props的值为函数类型

  const router = new VueRouter({ 
    routes: [       
     // 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参     
     { path: '/user/:id',  
       component: User,  
       props: route => ({ uname: 'zs', age: 20, id: route.params.id })} 
    ] 
  }) 
 
  const User = { 
    props: ['uname', 'age', 'id'],     
    template: ‘<div>用户信息：{{ uname + '---' + age + '---' + id}}</div>'  
  } 
 
<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>
 
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
 
    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }
 
      const Register = {
        template: '<h1>Register 组件</h1>'
      }
 
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })
 
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
posted @   一纸年华  阅读(20)  评论(0)  编辑  收藏  举报  
相关博文：
· vue学习--前端路由(三、Vue Router嵌套路由)
· vue学习--前端路由(五、Vue Router命名路由 )
· Vue Router
· 动态路由匹配
· Vue动态路径参数
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
历史上的今天：
2018-04-19 反射：获取Class对象的三种方式
点击右上角即可分享
微信分享提示
AI IDE Trae

目录导航

1 动态匹配路由的基本用法
2 路由组件传递参数
2.1 props的值为布尔类型
2.2 props的值为对象类型
3 props的值为函数类型