Vuejs2 创建的挂钩根本不起作用或不正确

我的index.js/

import Vue from 'vue';
import App from './App.vue';
import Users from './components/Users.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contacts from './components/Contacts.vue';
import CategoryItemList from './components/CategoryItemList.vue';
import './static/css/main.css';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
   {path: '/users/:teamId', name: 'users', component: Users},
   {path: '/', name: 'home', component: Home, children: [
     {path: 'cat/:id', name: 'category-item-list', component: 
      CategoryItemList }]}];

const router = new VueRouter({mode: 'hash', routes});

export default new Vue({ el: '#root', router, render: h => h(App) });

带有类别和路由器链接列表的我的组件/

<template lang="pug">
 div
  nav
   <li v-for="category in categories" v-bind:category="category">
    <router-link :to="{name: 'category-item-list', params: {id: category.id} 
                      }">{{category.title}}</router-link>
  </li>
</template>

<script>
   export default {
     name: "category-navigation",
  data: function () {
    return {
      categories: [
        {'title': 'first', 'id': 1},
        {'title': 'second', 'id': 2},
        {'title': 'third', 'id': 3}
      ]
    }
  }
 }
 </script>

类别的我的组件//

<template>
<div class="category" v-if="category">
  <h1>{{category.title}}</h1>
  <p>{{category.id}}</p>
  <span>{{this.$route.params.id}}</span>
</div>
</template>

<script>
export default {
    name: "category-item-list",
    data: function () {
      return {
        categories: [
          {'title': 'first', 'id': 1},
          {'title': 'second', 'id': 2},
          {'title': 'third', 'id': 3}
        ],
        category: null
      }
    },
    created: function () {
      let catId = this.$route.params.id - 1;
      console.log(catId);
      console.log(this.$route.params.id);
      this.category = this.categories[catId]
    }
}
</script>

路由工作正常，我得到{{this.$route.params.id}

---

每次含义不同，但不改变类别。那些变量catId一旦获得该值，就不会更改。我做错了什么？

问题与你的路线有关，特别是孩子们：

const routes = [
{
    path: '/users/:teamId', 
    name: 'users',
    component: Users
},
{
    path: '/', 
    name: 'home',
    component: Home,
    children: [
    {
        path: 'cat/:id',
        name: 'category-item-list', 
        component: CategoryItemList
    }]
}
];

将cat/：id嵌套在/route下是不正确的，更大的问题是您没有为嵌套组件提供出口。从文档中：

a rendered component can also contain its own, nested <router-view>. 
....
To render components into this nested outlet, we need to use the children option in VueRouter constructor config

仔细查看工作示例（如果您还没有），这将更好地帮助您理解：

见：

请注意页面与特定资源相关时的嵌套路由示例，例如：顶层的/cat/：id，然后作为子级的/edit，因此结果将是/cat/：id/edit。

回答此任务： 使用为刷新变量catId更新的挂钩：

created: function () {
      let catId = this.$route.params.id - 1;
      this.category = this.categories[catId]
    },
    updated: function () {
      let catId = this.$route.params.id - 1;
      this.category = this.categories[catId]
    }enter code here

---

谢谢你的建议，我才刚刚开始学习Vue，我可能正在用组件做一些事情。我只想在“主页”选项卡中浏览列表，但此时它不起作用，或者当它单击时，它进入类别但离开主页，因此失去了导航。更新了答案，希望它有助于澄清。非常感谢。你给我指出了方向，我想我可以找出这些东西在几天内不起作用，我用它来为我的jango rest api编写前端，我的第一个前端框架！好极了，我想一旦你对Vue的基本原理有了很好的了解，它将很快成为你的最爱之一。很高兴我能！顺便说一句，我仍然用我自己的方式，一切都很好。唯一的问题是我在$hook.params.id中创建了它，并将其作为数组元素的索引传递以获取元素，但没有更新它，问题是使用更新的hook解决的，我只需要更新变量。但你还是非常感谢你，这很有道理。还请注意，您可以在$route上设置一个观察者。很抱歉，但我有一个小问题：为什么在{{{this.$Route.params.id}}工作时它在我的模板中如此之远，而没有它，不，神奇。。。？