创建的钩子根本不工作或不正确

Question

我的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 一旦得到值，就不会改变。我做错了什么？

Answer 1

问题与您的路线有关，特别是 children:

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 嵌套在您的 / 路由下是不正确的，更大的问题是您没有为嵌套组件提供 <router-view></router-view> 出口。来自文档：

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

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

https://jsfiddle.net/yyx990803/L7hscd8h/

参见：https://router.vuejs.org/en/essentials/nested-routes.html

注意当页面与特定资源相关时示例嵌套路由，即 /cat/:id 在顶层，然后 /edit 作为 child，所以/cat/:id/edit 将是结果。

Answer 2

回答这个任务：使用挂钩更新刷新变量 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

创建的钩子根本不工作或不正确

The created hook does not work at all or not correctly

vue-router

vue-component

vuejs2