有人可以告诉我如何从url获取ID时更新数据。
赞
我的侧边栏有一些类别。类别1,类别2, 1类和2类上的链接是1类和2类
在加载页面时,我从category1获取数据,但是当我单击类别2时,页面未更新内容。
任何人都可以告诉我我们怎么做。
谢谢。
答案 0 :(得分: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>
答案 1 :(得分:0)
假设您的内容在路由器视图中:使用router-link并指向在vue-router实例中指定的相应路径