vue-router を始める

インストール

vue-router は 2 つのインストール方法を提供します。

1. パッケージ管理ツールを使用しない場合

\qquadUnpky.com は、 npm ベースの CDN リンクを提供します。https://unpkg.com/vue-router@4のコンテンツをローカルにオフラインにして、<script src="*.js"></script>ファイルにインポートできます。
\qquadオンライン版を導入することでファイルに導入することもできます
<script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></script>

3. パッケージ管理ツールを使用する

#npm
npm install vue-router@4

#yarn
yarn add vue-router@4

ルーティングの基本構成

// src/router/index.js

// 引入createRouter
import {
    
     createRouter } from 'vue-router'
// 引入文件
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
	{
    
    path: '/home', conponent: Home}，
	{
    
    path: '/about', conponent: About}
]

const router = createRouter({
    
    
	history: createWebHashHistory(),
	routes
})

export default router

// main.js

// 引入上面配置的路由 
import router from './router'

// 修改 createApp(App).mouted('#app') 为
createApp(App).use(router).mouted('#app')

使いやすい

// App.vue
<template>
<!-- 
	'/' 对应是 上面路由中配置的path
	 你也可以将上面的路径换成 '/home'，做好对应的修改即可 
-->
  <router-link to="/home">go to home</router-link>
  <router-link to="/about">go to about</router-link>
  <router-view></router-view>
</template>

![ここに画像の説明を挿入](https://img-blog.csdnimg.cn/266ae0b3e1c04083b23445b29678100c.png src/router/index.js で設定されたパスが
実際には URL サフィックスのパスであることは誰もが気づいたと思います。
構成パスがない'/'ため、ルート パスにアクセスすると、デフォルトでは App.vue のコンテンツのみが表示されます。

vue-router の公式ドキュメントを参照してください。