vue-router 入门

安装

vue-router 提供两种安装方式：

1. 不使用包管理工具

\qquad Unpky.com 提供了基于npm的CDN链接。我们可以将 https://unpkg.com/vue-router@4 中的内容离线到本地，继而通过<script src="*.js"></script>引入到文件中 。
\qquad 我们也可以通过引入在线版本的方式，引入到文件中
<script src="https://unpkg.com/vue-router@4.0.15/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 中配置的path其实就是url后缀的路径。
由于没有配置 '/'路径，所以在访问根路径时默认只显示App.vue中的内容

参考自vue-router官方文档