VueRouter引入步骤

一、安装VueRouter

• 如果你使用的是npm，可以通过以下命令安装VueRouter：

npm install vue-router@4  # 安装VueRouter 4.x版本，适用于Vue 3.x  
npm install vue-router@3  # 安装VueRouter 3.x版本，适用于Vue 2.x

二、配置VueRouter

1、创建路由配置：

在项目的src目录下创建一个router文件夹，并在其中创建一个index.js文件。

在index.js文件中，导入Vue和VueRouter，并使用Vue.use(VueRouter)来安装VueRouter插件（对于Vue 3，需要使用createRouter和createWebHistory或createMemoryHistory来创建路由实例）。

定义一个路由配置对象，该对象包含一个routes数组，数组中的每个元素都是一个路由规则对象，包含path（路径）和component（组件）等属性。

创建VueRouter实例：

根据Vue的版本和VueRouter的版本，创建VueRouter实例的方式可能有所不同。

对于Vue 2和VueRouter 3，可以使用new VueRouter({...})来创建实例。

对于Vue 3和VueRouter 4，需要使用createRouter函数来创建实例，并传入路由配置对象和路由历史记录类型（如createWebHistory()）。

将VueRouter实例挂载到Vue实例：

在main.js文件中，导入Vue、App组件以及刚刚创建的VueRouter实例。

创建一个新的Vue实例，并通过router选项将VueRouter实例挂载到Vue实例上。

最后，使用$mount('#app')将Vue实例挂载到DOM中的#app元素上。

三、使用VueRouter

在组件中使用<router-link>和<router-view>：

<router-link>用于创建导航链接，它会被渲染成一个<a>标签，但点击时不会重新加载页面，而是导航到指定的路由。

<router-view>是一个占位符，用于渲染匹配到的路由组件。

通过以上步骤，你就可以在Vue项目中成功引入并使用VueRouter了。这将使你的应用能够根据不同的URL来渲染不同的组件，从而实现单页面应用的路由功能。