安装
vue-router 提供两种安装方式:
- 不使用包管理工具
\qquad Unpky.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>
- 使用包管理工具
#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中的内容