vue-Router 删除params 传参的数据
时间: 2023-09-22 20:08:15 浏览: 92
要删除 Vue Router 中的 `params` 传参的数据,可以使用 `$router.push` 方法来重新导航到当前路由,并将 `params` 对象设置为空对象,从而清除已经传递的参数。具体实现可以参考以下代码示例:
```javascript
// 在当前路由中清除 params 传参的数据
this.$router.push({
name: this.$route.name,
params: {}
})
```
这里的 `name` 是当前路由的名称,可以通过 `$route.name` 获取。通过将 `params` 设置为空对象,就可以清除已经传递的参数。
另外,如果您想要删除所有的路由参数(包括 `params` 和 `query`),可以使用以下代码:
```javascript
// 在当前路由中清除所有的参数
this.$router.push({
path: this.$route.path,
})
```
这里的 `path` 是当前路由的路径,可以通过 `$route.path` 获取。通过将 `path` 设置为当前路径,就可以清除所有的路由参数。
相关问题
vue-router 的params query传参
在使用 Vue.js 进行前端开发时,经常需要进行页面的跳转和参数的传递。Vue.js 提供了一个官方的路由插件 vue-router,可以方便地进行页面的跳转和参数的传递。
vue-router 支持两种方式进行参数传递:params 和 query。
params 传参:
params 是路由路径中的占位符,可以通过 $route.params 来获取传递的参数。使用 params 传参时,需要在定义路由规则时使用冒号将参数名包裹起来,例如:
```javascript
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})
```
在上面的例子中,定义了一个 /user/:id 的路由规则,其中 :id 是一个占位符,可以接受任意的参数。
在组件中访问传递的参数时,可以通过 $route.params.id 来获取:
```javascript
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
```
在使用 params 传参时需要注意,如果在同一个路由规则下,参数发生变化时不会触发组件的生命周期钩子函数,需要通过 watch 监听 $route 对象来实现:
```javascript
const User = {
template: '<div>User {{ id }}</div>',
watch: {
'$route.params.id' (to, from) {
this.id = to
}
},
data () {
return {
id: ''
}
}
}
```
query 传参:
query 是通过 URL 的查询字符串传递参数,可以通过 $route.query 来获取传递的参数。使用 query 传参时,需要在定义路由规则时使用问号将参数名包裹起来,例如:
```javascript
const router = new VueRouter({
routes: [
{
path: '/user',
component: User
}
]
})
```
在组件中访问传递的参数时,可以通过 $route.query.id 来获取:
```javascript
const User = {
template: '<div>User {{ $route.query.id }}</div>'
}
```
在使用 query 传参时需要注意,参数的值会被转换为字符串类型,如果需要传递数组或对象等复杂数据类型,需要将其转换为 JSON 字符串。在组件中获取参数时需要使用 JSON.parse 解析字符串。例如:
```javascript
// 在路由中传递数组参数
router.push({ path: '/user', query: { ids: JSON.stringify([1, 2, 3]) } })
// 在组件中获取数组参数
const User = {
template: '<div>User {{ ids }}</div>',
computed: {
ids () {
return JSON.parse(this.$route.query.ids)
}
}
}
```
vue-router 的params query传参例子
假设我们有两个页面,分别是 `Home.vue` 和 `Article.vue`,我们需要在 `Home.vue` 页面中点击某个文章链接跳转到 `Article.vue` 页面,并且传递文章的 id 和 title 信息。
在 `Home.vue` 页面中,我们可以这样定义链接:
```html
<router-link :to="{ name: 'article', params: { id: 1, title: 'Vue Router' }, query: { category: 'web' } }">查看文章</router-link>
```
这里我们使用了 `router-link` 组件来创建链接,`to` 属性指定了链接的目标地址,其中:
- `name: 'article'` 表示目标页面的路由名称是 `article`,这个名称是在路由配置中定义的;
- `params: { id: 1, title: 'Vue Router' }` 表示传递了两个路由参数,一个是 `id`,值为 `1`,另一个是 `title`,值为 `Vue Router`;
- `query: { category: 'web' }` 表示传递了一个查询参数,键为 `category`,值为 `web`。
在路由配置中,我们需要定义 `article` 页面的路由规则,并且指定 `id` 和 `title` 作为路由参数:
```javascript
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/article/:id/:title',
name: 'article',
component: Article,
props: true
}
]
```
这里我们使用了动态路由参数来接收 `id` 和 `title` 的值,`props: true` 表示将路由参数作为组件的 props 传递给目标组件。
在 `Article.vue` 组件中,我们可以这样获取路由参数和查询参数:
```javascript
export default {
name: 'Article',
props: ['id', 'title'],
created() {
console.log(this.id, this.title) // 输出 1 'Vue Router'
console.log(this.$route.query.category) // 输出 'web'
}
}
```
这里我们通过 props 接收路由参数,并在 `created` 钩子函数中输出参数的值,同时使用 `$route.query` 获取查询参数的值。