nuxt-link属性有to、exact、active-class、exact-active-class等,详细说下。
时间: 2023-06-01 16:04:52 浏览: 64
nuxt-link 是 nuxt.js 的路由链接组件,用来生成应用内的链接。它有以下常用属性:
- to:链接到哪个路由。值可以是一个字符串或对象,与 Vue 路由的 to 属性相同。
- exact:是否要求精确匹配路由。默认值为 false。
- active-class:当链接到的路由与当前路由相同时,链接使用的 CSS 类名。默认值为 "nuxt-link-active"。
- exact-active-class:当链接到的路由与当前路由精确匹配时,链接使用的 CSS 类名。默认值为 "nuxt-link-exact-active"。
例如,以下代码生成一个链接到 "/about" 路由的 nuxt-link 组件:
```
<nuxt-link to="/about">About</nuxt-link>
```
如果当前路由为 "/about",则该链接将应用 "nuxt-link-active" 类名。
如果需要精确匹配路由,可以添加 exact 属性:
```
<nuxt-link to="/about" exact>About</nuxt-link>
```
如果当前路由完全匹配 "/about",则该链接将应用 "nuxt-link-exact-active" 类名。
可以通过修改 active-class 和 exact-active-class 属性设置自定义类名。
相关问题
nuxt-link 设置背景图片
你可以通过在 `nuxt-link` 标签中使用 `style` 属性来设置背景图片。例如:
```html
<nuxt-link
to="/"
style="background-image: url('/path/to/image.jpg');"
>
Home
</nuxt-link>
```
或者,你也可以在 CSS 样式表中设置 `nuxt-link` 的样式,如下所示:
```css
.nuxt-link-custom {
background-image: url('/path/to/image.jpg');
/* 其他样式 */
}
```
然后,在 `nuxt-link` 标签中添加 `class` 属性调用你定义的 CSS 类:
```html
<nuxt-link to="/" class="nuxt-link-custom">Home</nuxt-link>
```
nuxt nuxt-link带参数跳转
在Nuxt.js中,可以使用`<nuxt-link>`来实现带参数的跳转。具体的写法是在`<nuxt-link>`标签的`to`属性中使用`params`来传递参数。例如:
```html
<nuxt-link :to="{ name: 'products', params: { keyword: item.name }}">{{ item.name }}</nuxt-link>
```
这样就可以将`item.name`作为`keyword`参数传递给名为`products`的路由页面。
接受参数的方法有两种:
1. 在`asyncData(ctx)`方法中获取参数。可以使用`ctx.params.keyword`来获取通过参数传递的值。例如:
```javascript
async asyncData(ctx) {
console.log(ctx.params.keyword) // 可以获取到通过参数传递的值
}
```
2. 在`created()`生命周期中获取参数。可以使用`this.$route.params.keyword`来获取通过参数传递的值。例如:
```javascript
created() {
console.log(this.$route.params.keyword) // 可以获取到通过参数传递的值
}
```
需要注意的是,`<nuxt-link>`的使用方式与`<router-link>`相同,所以在接受参数方面也可以参考`<router-link>`的用法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [nuxt:nuxt-link的动态路由和传参](https://blog.csdn.net/weixin_45844049/article/details/105581675)[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: 100%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)