<el-breadcrumb-item :to="javascript: history.go(-1)">收缩</el-breadcrumb-item>这样写对吗
时间: 2023-09-03 11:13:19 浏览: 66
不对。在 Vue 模板语法中,可以在属性值中使用 JavaScript 表达式,但是必须使用 `v-bind` 或简写的 `:` 来绑定属性,否则会被当作字符串处理。
因此,如果您想要在 el-breadcrumb-item 中使用 JavaScript 表达式来返回上一级页面,应该将 to 属性绑定为一个返回字符串的函数,例如:
```html
<el-breadcrumb-item :to="() => { history.go(-1) }">收缩</el-breadcrumb-item>
```
这样,当用户点击该 el-breadcrumb-item 时,`history.go(-1)` 方法将被执行,页面将会返回到上一级。需要注意的是,这种方式只适用于返回上一级的场景,如果您需要返回到其他页面,可以在 to 属性中设置其他的 URL。
相关问题
<el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path}">{{item.meta.title}}</el-breadcrumb-item>
这是一个使用 ElementUI 的 el-breadcrumb-item 组件动态生成面包屑导航的代码。通过 v-for 循环遍历传入组件的 breadcrumb 数组,使用 :key 绑定 index,使用 :to 绑定当前面包屑导航项对应的路由信息。同时,通过 {{item.meta.title}} 绑定当前面包屑导航项的名称,其中 item 是通过 v-for 循环遍历出来的当前项,meta 是当前路由信息对象的一个属性,title 是自定义的路由名称。这段代码的作用是根据路由信息生成对应的面包屑导航项,并且可以通过路由跳转实现面包屑导航项的点击跳转。
<el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" v-show="item.meta.title" :to="item.path" >有什么用
在Vue.js中,`<el-breadcrumb-item>`是一个面包屑导航组件,用于显示当前访问页面的路径。在你提供的代码中,`v-for="(item, index) in $route.matched"`会遍历 `$route.matched` 数组中的路由对象,并为每个路由对象渲染一个面包屑导航项。`:key="index"`用于指定循环遍历中的每个面包屑导航项的唯一标识符,`v-show="item.meta.title"`用于控制只有在路由对象具有 `meta.title` 属性时才显示面包屑导航项,`:to="item.path"`用于指定面包屑导航项的路由目标路径,也就是说,当你点击面包屑导航项时,它将导航到对应的路由路径。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
<template> <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb"> <el-breadcrumb-item>首页</el-breadcrumb-item> <el-breadcrumb-item v-for="bread in breadList" v-bind:key="bread"> {{ breadsName[bread] }} </el-breadcrumb-item> </el-breadcrumb> </template> <script lang="ts"> import { Provide, Component, Watch, Prop, Vue } from 'vue-property-decorator'; @Component export default class BreadCrumb extends Vue { @Provide() private breadsName: { [index: string]: string } = { '1': 'title1', '1-1': 'title1-1', '1-2': 'title1-2', '1-3': 'title1-3', }; @Provide() private breadList: string[] = []; private created() { this.getBreadList(); } @Watch('$route') private getBreadList() { this.breadList = []; for (const routeInfo of this.$route.matched) { if (typeof routeInfo.name === 'string' && routeInfo.name !== 'home') { this.breadList.push(routeInfo.name); } } } } </script> <style lang="less"> .breadcrumb { margin-bottom: 20px; } </style>
![](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)