router-link 动态路径
时间: 2023-08-15 10:08:38 浏览: 38
如果你想要在 `router-link` 中使用动态路径,可以通过绑定 `to` 属性来实现。你可以将动态路径作为一个变量或者表达式传递给 `to` 属性。以下是一个示例:
```html
<template>
<div>
<router-link :to="dynamicPath">跳转按钮</router-link>
<button @click="redirectToDynamicPath">点击跳转</button>
</div>
</template>
<script>
export default {
data() {
return {
dynamicPath: '/path'
};
},
methods: {
redirectToDynamicPath() {
this.$router.push(this.dynamicPath);
}
}
};
</script>
```
在上述示例中,我们定义了一个名为 `dynamicPath` 的数据属性,它的初始值是 `'/path'`,这个值可以是一个变量或者计算属性。
然后,我们在 `router-link` 组件中使用 `:to` 绑定动态路径,将 `dynamicPath` 作为表达式传递给 `to` 属性。当 `dynamicPath` 的值发生变化时,`router-link` 的链接也会相应地更新。
同时,我们还添加了一个普通按钮,并通过点击事件监听器 `@click` 调用 `redirectToDynamicPath` 方法,在点击按钮时实现页面的动态跳转。
需要注意的是,上述示例中的 `/path` 是一个示例路径,你可以根据实际需要替换成你想要的动态路径。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)