$route详解

最新推荐文章于 2024-08-12 17:17:04 发布

正儿八经学前端

最新推荐文章于 2024-08-12 17:17:04 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42101753/article/details/106144666

本文详细探讨了Vue.js框架中的$route对象，它是Vue Router的重要组成部分。通过路由参数、导航守卫、动态路由匹配等内容，深入解析了如何利用$route进行页面间的交互和数据传递，帮助开发者更好地理解和应用Vue Router。

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ msg }}</h1>

      <hr />

      <router-link to="/product/1/haha">商品1</router-link>
      <router-link to="/product/2">商品2</router-link>
      <router-link to="/product/3">商品3</router-link>
      <router-link to="/product/4">商品4</router-link>

      <hr />
      <router-view></router-view>
    </div>

    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
      const Product = {
        template: `
          <div>这是商品详情页的组件 -----{{$route.params.id}}</div>
        `,
        created() {
          console.log(this.$route)
        }
      }

      // 动态路由的目的：让多个路由规则匹配同一个组件
      // 1. 定义规则  { path: '/product/:id' , component: Product}
      // 2. 获取动态路由的参数： this.$route.params.id
      const router = new VueRouter({
        // 动态路由匹配
        //   /product/:id   匹配到所有  /product/10086
        routes: [{ path: '/product/:id/:aa', component: Product }]
      })
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue'
        },
        router
      })
    </script>
  </body>
</html>