import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import Home from './components/HelloWorld.vue' var router = new VueRouter({ // 创建路由实例对象router routes: [ { path: '/', redirect: '/home', meta: { title: '首页' } }, { path: '/home', component: Home, name: 'home', meta: { title: '首页' } }, ] ,router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title }; next(); }) }) export default router 报错

你的代码中，`router.beforeEach()` 方法应该放在 `routes` 数组后面，而不是放在外面，因为 `router` 对象是在 `routes` 中创建的。也就是说，将 `router.beforeEach()` 方法移动到 `routes` 数组后面即可，如下所示：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from './components/HelloWorld.vue'

var router = new VueRouter({
  // 创建路由实例对象router
  routes: [
    { path: '/', redirect: '/home', meta: { title: '首页' } },
    { path: '/home', component: Home, name: 'home', meta: { title: '首页' } },
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  };
  next();
})

export default router

这样应该就可以解决报错问题了。

相关问题

error in ./src/router/index.js Module not found: Error: Can't resolve '@/views/Contact.vue' in '/root/www/src/router' ERROR in ./src/router/index.js 3:0-36 Module not found: Error: Can't resolve '@/views/Home.vue' in '/root/www/src/router' @ ./src/main.js 5:0-30 9:2-8 ERROR in ./src/router/index.js 4:0-38 Module not found: Error: Can't resolve '@/views/About.vue' in '/root/www/src/router' @ ./src/main.js 5:0-30 9:2-8 ERROR in ./src/router/index.js 5:0-42 Module not found: Error: Can't resolve '@/views/Contact.vue' in '/root/www/src/router' @ ./src/main.js 5:0-30 9:2-8 ERROR in [eslint] /root/www/src/App.vue 26:7 error The "HelloWorld" component has been registered but not used vue/no-unused-components

这些错误信息是关于模块导入的问题。它们指出在你的代码中找不到所需的模块。根据错误信息，可以看出你的代码中缺少了 `@/views/Home.vue`、`@/views/About.vue` 和 `@/views/Contact.vue` 这些组件文件。

同时，还有一个关于 `HelloWorld` 组件的警告，它表示你已经在代码中注册了这个组件，但是并没有使用它。你可以检查你的代码中是否真的需要使用这个组件，如果不需要，可以将其从代码中删除。

<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> --> <GoodsList @click="onClick"/> <GoodsDetail01 /> <GoodsDetail02/> </div> </template> <script> import GoodsList from './components/goodsList.vue'; import GoodsDetail01 from './components/goodsDetail01.vue'; import GoodsDetail02 from './components/goodsDetail02.vue'; // import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', data(){ return{ active: 'GoodsList' }; }, methods:{ onClick(name){ this.name = name; } }, components: { // HelloWorld, GoodsList, GoodsDetail01, GoodsDetail02 } } </script>怎么改成展示主页Goodslist，点击主页列表图片实现跳转到其他页面

你可以在 `GoodsList` 组件中添加一个点击事件，然后在该事件中触发路由跳转，具体操作如下：

1. 在 `GoodsList` 组件中添加点击事件 `handleClick`，并传递当前商品的 id：

<template>
  <div class="goods-item" @click="handleClick(goods.id)">
    <img :src="goods.imgUrl" alt="" />
    <div class="goods-name">{{ goods.name }}</div>
    <div class="goods-price">{{ goods.price }}</div>
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleClick(id) {
      this.$router.push(`/goods/${id}`);
    }
  }
};
</script>

2. 在 `App` 组件中，将 `GoodsList` 组件作为默认展示的组件，并在 `onClick` 方法中更新 `active` 属性：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import GoodsList from "./components/goodsList.vue";

export default {
  name: "App",
  components: {
    GoodsList
  },
  data() {
    return {
      active: "GoodsList"
    };
  },
  methods: {
    onClick(name) {
      this.active = name;
    }
  }
};
</script>

3. 在路由文件中，配置路由规则：

import Vue from "vue";
import VueRouter from "vue-router";
import GoodsDetail01 from "./components/goodsDetail01.vue";
import GoodsDetail02 from "./components/goodsDetail02.vue";
import GoodsList from "./components/goodsList.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: GoodsList
  },
  {
    path: "/goods/:id",
    component: GoodsDetail01
  },
  {
    path: "/goods/:id/detail",
    component: GoodsDetail02
  }
];

const router = new VueRouter({
  routes
});

export default router;

以上是一个简单的跳转实现，你可以根据需求进行进一步的开发和优化。