vue-ssr 2.集成vue-router

安装依赖

jsx

yarn add vue-router

配置路由

创建两个路由对应的页面，方便测试

src/views/Foo.vue

jsx

<template>
	<div>Foo page</div>
</template>

<script>
export default {
	name: "Foo",
};
</script>

<style scoped>
div {
	background: red;
}
</style>

src/views/Bar.vue

jsx

<template>
	<div>Bar page</div>
</template>

<script>
export default {
	name: "Bar",
};
</script>

<style scoped>
div {
	background-color: blue;
}
</style>

App.vue 添加路由组件进行切换

jsx

<template>
	<!-- app节点必须在此处定义，否则客户端交互失效，所以防止这里统一管理 -->
	<div id="app">
		<button @click="add">click me</button>
		<div>counter: {{ counter }}</div>
		<router-link to="/">foo</router-link>
		<router-link to="/bar">bar</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
export default {
	name: "App",
	data() {
		return { counter: 1 };
	},
	methods: {
		add() {
			this.counter++;
		},
	},
};
</script>

<style lang="scss" scoped></style>

src/router/index.js：配置路由文件

jsx

import Vue from "vue";
import Router from "vue-router";

import Foo from "../views/Foo.vue";
import Bar from "../views/Bar.vue";

Vue.use(Router);

export default function () {
	const router = new Router({
		mode: 'history',
		routes: [
			{
				path: '/', component: Foo
			},
			{
				path: '/bar', component: Bar
			},
			{
				path: '*', component: {
					render(h) {
						return h("div", {}, "not found 404");
					}
				}
			},
		]
	});

	return router;
}

src/app.js ：引入router 创建路由

jsx

import Vue from "vue";
import App from "./App.vue"
import createRouter from "./router";

export default () => {
	const router = createRouter();
	const app = new Vue({
		router,
		render: h => h(App)
	});
	return { app, router }
}

至此vue-router 集成完成，但是会有个问题，从首页切至bar页面按回车会导致404

解决：刷新本地路由bar页面地址会导致404问题

src/server-entry.js：利用vue-router 的push 和onReady接口解决

jsx

import createApp from "./app.js";

export default function (context) {
	const { url } = context;
	return new Promise((resolve, reject) => {
		const { app, router } = createApp();
		//! 说明：如果当前使用的是前端路由，比如：/bar 回车就会导致404,
		//! 解决办法：利用vue-router的push和onReady接口解决
		//! 1. 让其跳入前端路由
		router.push(url);
		//! 2. 路由渲染完毕，准备进入匹配的路由
		router.onReady(() => {
			const matchComponents = router.getMatchedComponents();
			if (matchComponents.length === 0) {
				return reject({ code: 404 });
			} else {
				Promise.all(matchComponents.map(component => {
					if (component.asyncData) {
						return component.asyncData();
					}
				})).then(() => {
					resolve(app);
				});
			}
		});
	});
}

示例代码：传送门

总结

本地的路由按回车是会404的，所以服务端渲染需要先让前端路由跳转渲染，等路由页面渲染好等待跳转onReady触发时再进行返回

以上：如发现有问题，欢迎留言指出，我及时更正

vue-ssr 2.集成vue-router #

安装依赖 #

配置路由 #

解决：刷新本地路由bar页面地址会导致404问题 #

总结 #

vue-ssr 2.集成vue-router

安装依赖

配置路由

解决：刷新本地路由bar页面地址会导致404问题

总结