首页vue3路由哈希传参

vue3路由哈希传参

时间: 2025-01-16 12:58:24 浏览: 51

### Vue3 路由哈希模式传递参数在 Vue3 中使用路由的哈希模式可以方便地实现单页面应用程序中的导航功能。当需要通过路径传递参数时，可以通过定义动态路由来接收这些参数。 #### 定义带参数的路由规则为了能够在哈希模式下传递参数，在创建路由器实例时应设置 `mode` 属性为 `'hash'` 并定义带有占位符（`:paramName`）的路径[^1]： ```javascript import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/item/:id', name: 'ItemDetail', component: ItemDetailComponent, }, ] const router = createRouter({ history: createWebHashHistory(), routes, }) ``` 上述代码片段展示了如何配置一条名为 `ItemDetail` 的路由规则，其中 `path` 使用了冒号开头的名字作为占位符表示该位置将会被实际传入的具体值所替代。 #### 访问并显示参数组件内部可通过 `$route.params` 来获取当前匹配到的参数对象，并从中读取特定名称对应的参数值[^2]: ```html <template> <div class="item-detail"> <h2>Item ID: {{ itemId }}</h2> </div> </template> <script setup> import { ref, onMounted } from 'vue'; import { useRoute } from 'vue-router'; let route = useRoute(); let itemId = ref(''); onMounted(() => { // 获取 URL 参数 id itemId.value = route.params.id; }); </script> ``` 此模板展示了一个简单的例子，用于展示接收到的商品ID(`itemId`)。注意这里利用了组合式API里的`useRoute()`钩子函数来访问当前激活的路由信息。

阅读全文