wordpress 与 vuejs 如何链接到网站页面

Question

I am trying to revamp a website with the vuejs framework and I'm currently using this boilerplate to build on. I'm extremely new to vuejs, like 3 days new, and I'm trying to figure out how to create links to specific pages on my wordpress site. I successfully have been able to create links to different components that works however I have no idea how to create a component for a specific page (like a template) and render that page, on wordpress.

My router for my current components look like this --

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;

And my header for these links are as usual -

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

How do I call a page that originally used a custom php template?

Answer 1

WordPress provides a REST API interface that can be used to get Posts and other content from a WordPress Website in JSON Format. You can then manipulate that JSON however you feel like.

The rest API can be accessed at,

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.

The Posts and Pages can be accessed at,

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.

You can use the following GET url to get a post with a certain 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

You can read more about the WordPress Rest API over at the REST API Handbook provided by WordPress Developers.