Question

有人可以告诉我如何从url获取ID时更新数据。

我的侧边栏有一些类别。类别1，类别2， 1类和2类上的链接是1类和2类

在加载页面时，我从category1获取数据，但是当我单击类别2时，页面未更新内容。

任何人都可以告诉我我们怎么做。

谢谢。

Answer 1

您可以vue-router https://router.vuejs.org/
像这样注册您的路线：

import Vue from "vue";
import Router from "vue-router";
import App from "@/views/App.vue"
import Category from "@/views/Category.vue"

Vue.use(Router);

const routes = [{
    name: "category",
    path: "/category/:id",
    component: Category
}];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

在根模板中也称为App.vue的某个位置：

<template>
  <div> 
    <nav> 
      <router-link to="{ name: 'category', params: {id: 1} }">category 1</router-link>
      <router-link to="{ name: 'category', params: {id: 2} }">category 2</router-link>
     </nav>
     <main>
       <router-view></router-view>
     </main>
  </div>
</template>

在Category.vue中，您必须注意$ route，因为在更改路线中的：id参数时，vue-router不会按设计重新渲染组件。

<template>
  <div>
     {{ category }}
  </div>
</template>

<script>
export default {
  data: { category: "" },
  watch: {
    "$route": (to, from) => {
      this.category = to.params.id;
    }
  },
  created: () => {
    this.category = this.$route.params.id;
  }
}
</script>

Answer 2

假设您的内容在路由器视图中：使用router-link并指向在vue-router实例中指定的相应路径

文档的首页： https://router.vuejs.org/guide/#html

在Vue和Vuex中更新链接时未获取数据

2 个答案: