vue的动态路由与在路由跳转时在query中或param中添加参数,后者是否能够替代前者呢,如果不能请说明必须要使用前者的例子
时间: 2023-03-28 16:03:40 浏览: 83
可以使用在query或param中添加参数来替代动态路由,但是这样做会使得URL变得冗长,不利于SEO优化和用户体验。另外,动态路由可以更加灵活地处理路由参数,例如可以使用正则表达式匹配路由,实现更加复杂的路由匹配逻辑。举个例子,如果我们需要实现一个博客系统,可以使用动态路由来处理博客文章的路由,例如"/blog/:id",这样就可以根据文章的id来动态生成路由。
相关问题
vue param 路由参数刷新不丢失的方法
在 Vue.js 中,使用 $route.params 获取路由参数。如果要在刷新页面后仍然保留参数,可以将参数保存到本地存储中,然后在页面加载时从本地存储中获取参数。
以下是一个示例:
1. 在路由跳转时保存参数到本地存储中:
```javascript
// 在路由跳转时保存参数到本地存储中
this.$router.push({ path: '/path', query: { id: 1 }})
localStorage.setItem('id', 1)
```
2. 在页面加载时从本地存储中获取参数:
```javascript
// 在页面加载时从本地存储中获取参数
const id = localStorage.getItem('id')
```
3. 在组件中使用 $route.params 或从本地存储中获取参数:
```javascript
// 在组件中使用 $route.params 或从本地存储中获取参数
computed: {
id() {
// 优先使用 $route.params 中的参数
if (this.$route.params.id) {
return this.$route.params.id
}
// 如果 $route.params 中不存在参数,则从本地存储中获取参数
return localStorage.getItem('id')
}
}
```
vue3路由跳转携带参数
在Vue 3中,你可以使用Vue Router来进行路由导航,并且可以携带参数。以下是一个示例代码:
1. 在导航源组件中,使用`this.$router.push`方法来进行路由跳转,并在该方法的第一个参数中指定目标路由的路径。此外,你还可以在第二个参数中传递一个对象,用于携带参数。
```javascript
// 源组件
this.$router.push({ path: '/destination', query: { param1: 'value1', param2: 'value2' }});
```
2. 在目标组件中,你可以通过`this.$route.query`属性来访问传递的参数。
```javascript
// 目标组件
console.log(this.$route.query.param1); // 输出 'value1'
console.log(this.$route.query.param2); // 输出 'value2'
```
请注意,这里使用了`query`属性来传递参数,这将把参数附加在URL的查询字符串中。如果你想要将参数直接嵌套在URL中,可以使用`params`属性进行设置和获取。
在此示例中,目标URL将会是`/destination?param1=value1¶m2=value2`。如果你的目标URL是`/destination/:param1/:param2`,那么可以使用`params`属性来传递参数。
希望这对你有所帮助!如果你还有其他问题,请随时提问。