带有vuejs的wordpress如何链接到网站页面

Posted 2023-02-22

【中文标题】带有vuejs的wordpress如何链接到网站页面

【英文标题】：wordpress with vuejs how to link to site pages

【发布时间】：2020-02-14 18:24:14

【问题描述】：

我正在尝试使用 vuejs 框架改造一个网站，我目前正在使用这个 boilerplate 来构建。我对 vuejs 非常陌生，比如 3 天的新手，我正在尝试弄清楚如何在我的 wordpress 网站上创建指向特定页面的链接。我成功地创建了指向不同组件的链接，但是我不知道如何为特定页面（如模板）创建组件并在 wordpress 上呈现该页面。

我当前组件的路由器看起来像这样--

import _ from "lodash";

import Vue from "vue";

import Router from "vue-router";



// Components

import Home from "../components/Home.vue";

import Post from "../components/Post/Post.vue";

import Page from "../components/Page/Page.vue";


import StatSearch from "../components/StatSearch.vue";
import CurrentShop from "../components/CurrentShop.vue";

import GameNews from "../components/GameNews.vue";

import UpcomingItems from "../components/UpcomingItems.vue";
import Challenges from "../components/Challenges.vue";




Vue.use(Router);


const router = new Router(

routes: [





path: "/",

name: "Home",

component: Home
,



path: "/CurrentShop",

name: "CurrentShop",

component: CurrentShop
,



path: "/Challenges",

name: "Challenges",

component: Challenges
,



path: "/UpcomingItems",

name: "UpcomingItems",

component: UpcomingItems
,



path: "/GameNews",

name: "GameNews",

component: GameNews
,




// Assuming you're using the default permalink structure for posts

path: "/:year/:month/:day/:postSlug",

name: "Post",

component: Post

,




path: 
"/:pageSlug",

name: "Page",

component: Page


,
],

mode: "history",

base: "",



// Prevents window from scrolling back to top

// when navigating between components/views

scrollBehavior(to, from, savedPosition) 

if (savedPosition) 

return savedPosition;

 else 

return  x: 0, y: 0 ;




);



router.afterEach((to, from) => 

// Add a body class specific to the route we're viewing

let body = document.querySelector("body");

let bodyClasses = body.className.split(" ");


if (bodyClasses.length > 0) 

const newBodyClasses = bodyClasses.filter(theClass =>

theClass.startsWith("vue--page--")

);




const slug = _.isEmpty(to.params.postSlug)

? to.params.pageSlug

: to.params.postSlug;

body.classList.add("vue--page--" + slug);
);

export default router;

这些链接的标题和往常一样 -

<li><router-link class="nav-link" to="/CurrentShop">Current Shop</router-link></li>

如何调用最初使用自定义 php 模板的页面？

【参考方案1】：

WordPress 提供了一个 REST API 接口，可用于从 WordPress 网站以 JSON 格式获取帖子和其他内容。然后，您可以随心所欲地操作该 JSON。

其余API可以访问，

https://example.url/wp-json             -> Gives all available namespaces for the API.
https://example.url/wp-json/wp/v2/      -> The built-in WordPress API Namespace. Contains all built-in routes for posts, pages, users, etc.

可以在以下位置访问帖子和页面，

https://example.url/wp-json/wp/v2/posts  -> Access all Publicly published posts
https://example.url/wp-json/wp/v2/pages  -> Access all Publicly published pages

You can find more routes over at the REST API Handbook  -> Link given below.

您可以使用以下 GET url 获取带有特定 slug 的帖子

https://example.url/wp-json/wp/v2/posts?slug=post-slug  -> This will return a post with the given slug
https://example.url/wp-json/wp/v2/posts?author=1        -> This will return all posts published by an author with the Author Id of 1

您可以在 WordPress 开发人员提供的 REST API Handbook 上阅读有关 WordPress Rest API 的更多信息。

【讨论】：

嗨，感谢您的回复，但是我不确定如何在我的 vue 主题中实现它。我熟悉 api，但我是 vue 新手。我正在尝试创建指向特定页面和特定自定义分类档案的路由器链接。