You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/ssr/routing.md
+12-12
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
-
# Routing and Code-Splitting
1
+
# ルーティングとコード分割
2
2
3
-
## Routing with `vue-router`
3
+
## `vue-router` によるルーティング
4
4
5
-
You may have noticed that our server code uses a `*`handler which accepts arbitrary URLs. This allows us to pass the visited URL into our Vue app, and reuse the same routing config for both client and server!
It is recommended to use the official [vue-router](https://github.com/vuejs/vue-router-next)library for this purpose. Let's first create a file where we create the router. Note that similar to application instance, we also need a fresh router instance for each request, so the file exports a `createRouter`function:
Code-splitting, or lazy-loading part of your app, helps reduce the size of assets that need to be downloaded by the browser for the initial render, and can greatly improve TTI (time-to-interactive) for apps with large bundles. The key is "loading just what is needed" for the initial screen.
Vue Router provides [lazy-loading support](https://next.router.vuejs.org/guide/advanced/lazy-loading.html), allowing[webpack to code-split at that point](https://webpack.js.org/guides/code-splitting-async/). All you need to do is:
On both client and server we need to wait for router to resolve async route components ahead of time in order to properly invoke in-component hooks. For this we will be using [router.isReady](https://next.router.vuejs.org/api/#isready)method Let's update our client entry:
0 commit comments