computed: { onRoutes() { return this.$route.path.replace('/', ''); } },
时间: 2024-05-30 12:09:50 浏览: 14
这段代码定义了一个计算属性 onRoutes,它返回 this.$route.path.replace('/', ''),即当前路由的路径去掉开头的‘/’后的字符串。这里使用了 Vue.js 的路由功能,$route 是 Vue.js 自带的一个对象,包含当前路由的相关信息,如路径、参数等。computed 属性用于定义计算属性,它会根据依赖的响应式数据自动计算出一个新的值。在这里,onRoutes 计算属性依赖于 $route.path,当 $route.path 发生变化时,Vue.js 会自动重新计算 onRoutes 的值。
相关问题
this.$route.path报错
这个错误通常是因为你在组件中使用了 `this.$route.path`,但是没有在组件中导入 `vue-router`。你需要确保在组件中导入 `vue-router` 并在 `created` 生命周期函数中使用 `$route.path`。具体的代码示例如下:
```
<template>
<div>{{ currentPath }}</div>
</template>
<script>
import { mapState } from 'vuex'
import { VueRouter } from 'vue-router'
export default {
name: 'MyComponent',
mixins: [VueRouter],
created() {
this.currentPath = this.$route.path
},
computed: {
...mapState(['currentPath'])
}
}
</script>
```
如果你已经导入 `vue-router` 并且仍然遇到问题,请检查是否正确安装了 `vue-router`。你可以在终端中运行以下命令安装 `vue-router`:
```
npm install vue-router
```
this.$route undefined
这个错误通常出现在 Vue.js 应用程序中,意味着你正在尝试访问一个未定义的 `$route` 对象。 `$route` 对象是 Vue.js 的一个内置对象,它包含了当前路由的信息。如果你想在组件中访问 `$route` 对象,你需要确保它已经被正确地注入到组件中。
通常,你可以通过在组件中导入 `vue-router` 来访问 `$route` 对象。例如:
```
import { mapGetters } from 'vuex'
import { mapState } from 'vuex'
import { mapActions } from 'vuex'
import { mapMutations } from 'vuex'
import router from '@/router'
export default {
// ...
computed: {
// ...
...mapGetters('moduleA', ['getterA']),
...mapState('moduleB', ['stateB']),
// ...
},
methods: {
// ...
...mapActions('moduleC', ['actionC']),
...mapMutations('moduleD', ['mutationD']),
// ...
},
mounted() {
// ...
console.log(this.$route)
// ...
},
// ...
}
```
如果你仍然收到 `$route` 未定义的错误,可能是因为你的路由没有正确配置。请确保你已经正确地定义了路由并将其与 Vue.js 应用程序关联起来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)