时间戳

首页 > 解决方案 > 带有vuejs的wordpress如何链接到网站页面

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

问题描述

我正在尝试使用 vuejs 框架改造一个网站，我目前正在使用这个样板来构建。我对 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 模板的页面？

标签： phpwordpressvue.jsvuejs2

解决方案

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 手册中阅读有关WordPress Rest API的更多信息。

推荐阅读