vue-router路由params参数刷新消失
时间: 2023-06-01 11:06:32 浏览: 157
回答:当使用 vue-router 路由时,params 参数默认情况下会随着页面的刷新而消失,这是因为 Vue 默认的路由模式是哈希模式。如果需要在刷新页面后仍然保存 params 参数,可以考虑使用 history 模式,这样 params 参数就会被保存在浏览器的历史记录中,不会随着页面刷新而消失。
相关问题
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路由嵌套理解
Vue-Router是Vue.js官方提供的路由管理插件,可以实现单页面应用(SPA)中的路由切换。在Vue-Router中,我们可以通过嵌套路由来管理复杂的页面结构和页面间的跳转逻辑。
路由嵌套是指在一个路由组件中嵌套其他子路由组件,形成一个父子关系的层级结构。通过路由嵌套,我们可以更好地管理页面的细节和逻辑。
在Vue-Router中,我们首先需要定义路由的层级结构。我们可以在路由配置中使用`children`属性来定义嵌套路由。例如:
```js
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home,
children: [
{
path: 'about',
component: About
},
{
path: 'contact',
component: Contact
}
]
}
]
});
```
在上面的代码中,我们定义了一个名为`home`的父路由,它有两个子路由`about`和`contact`。当用户访问`/home/about`时,会渲染`About`组件,而当用户访问`/home/contact`时,会渲染`Contact`组件。
在嵌套路由中,父路由的组件中需要使用`<router-view>`标签来显示子路由对应的组件。在上面的例子中,我们需要在`Home`组件中添加`<router-view>`标签。
```html
<template>
<div>
<h1>Home</h1>
<router-view></router-view>
</div>
</template>
```
当用户访问`/home`时,会渲染`Home`组件,并且`<router-view>`标签中会显示子路由对应的组件。
通过嵌套路由,我们可以更好地管理页面的结构和逻辑,将页面分成多个模块,并且可以在子路由中访问父路由的数据和方法。我们可以在路由跳转时传递参数,通过使用`$route.params`来获取参数。
总结来说,Vue-Router的路由嵌套可以实现复杂的页面结构和页面间的跳转逻辑,通过定义父子关系的路由层级结构,使用`<router-view>`标签来显示子组件,并且可以通过路由传递参数来实现页面间的数据共享。
阅读全文