vue3 路由传参不使用query 打开新页面
时间: 2023-08-28 17:05:06 浏览: 42
在 Vue3 中,可以使用 `params` 属性来进行路由参数传递。
首先,在定义路由时,在 `path` 中添加参数占位符,例如:
```
const routes = [
{
path: '/user/:id',
name: 'user',
component: User
}
]
```
然后,在使用 `router-link` 或者编程式导航时,可以通过 `params` 属性传递参数,例如:
```
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
```
或者
```
this.$router.push({ name: 'user', params: { id: 123 }})
```
在组件中,可以通过 `$route.params` 来获取参数,例如:
```
export default {
created() {
console.log(this.$route.params.id)
}
}
```
如果你需要打开一个新页面,可以在 `router-link` 中添加 `target="_blank"` 属性,例如:
```
<router-link :to="{ name: 'user', params: { id: 123 } }" target="_blank">User</router-link>
```
相关问题
vue3 路由传参不显示在url,还有打开新页面
Vue3 中的路由传参可以通过以下两种方式实现:
1. 使用路由参数
在定义路由时,可以使用冒号(:)来定义路由参数。例如:
```javascript
const routes = [
{
path: '/user/:id',
name: 'user',
component: User
}
]
```
在这个例子中,`:id` 表示一个路由参数。当访问 `/user/123` 时,路由将会匹配到 `User` 组件,并且 `this.$route.params.id` 将会是 `123`。
2. 使用查询参数
在 URL 中使用查询参数,可以使用 `query` 属性来传递数据。例如:
```javascript
const router = createRouter({
history: createWebHistory(),
routes
})
router.push({ path: '/user', query: { id: '123' }})
```
在这个例子中,`query` 属性传递的是一个对象,其中 `id` 是一个查询参数。当访问 `/user?id=123` 时,路由将会匹配到 `User` 组件,并且 `this.$route.query.id` 将会是 `123`。
对于打开新页面,可以使用 `window.open(url)` 来实现。例如:
```javascript
window.open('/user?id=123', '_blank')
```
这将会在新窗口中打开一个 URL 为 `/user?id=123` 的页面。
uniapp vue路由传参
在uniapp中,可以使用Vue Router来进行路由传参。有几种不同的方式可以实现路由传参:
1. 使用params传参:通过在路由地址中添加参数来传递数据。在路由跳转时,可以使用`uni.navigateTo`或`uni.redirectTo`方法,并在URL中添加参数。在目标页面中,可以通过`this.$route.params`来获取传递的参数值。
2. 使用query传参:通过在URL中添加查询参数来传递数据。在路由跳转时,可以使用`uni.navigateTo`或`uni.redirectTo`方法,并在URL中添加查询参数。在目标页面中,可以通过`this.$route.query`来获取传递的参数值。
3. 使用Vuex进行全局状态管理:通过在Vuex中存储需要传递的参数,可以在任何组件中获取和修改这些参数。在路由跳转时,可以直接修改Vuex中的参数值,在目标页面中获取最新的参数值。
通过以上三种方式,你可以在uniapp中实现Vue路由传参。请根据你的具体需求选择适合的方式进行实现。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [(vue面试题)什么是Vue.js中的计算属性(computed)和侦听属性(watch)?它们之间有什么区别?.txt](https://download.csdn.net/download/weixin_44609920/88229893)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [uniapp页面路由传参](https://blog.csdn.net/weixin_50501118/article/details/124678534)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]