一、引入依赖 

 

07 vue-router的引入        

这是vue-router的官方文档

方式1.CDN引入：先不考虑

方式2.使用npm安装：

因为vue-router的默认版本为4版本，而vue2使用vue-router3版本，vue3使用vue-router4版本，因此使用以下命令行安装指定的版本

npm install vue-router // 下载最新依赖的版本
npm install vue-router@3.6.5 // @+版本号指定下载的版本

 查看vue-router最近的版本号：打开npmjs.com，搜索vue-router，查看最近的版本号 

下载完成后，打开package.json查看是否下载成功及其版本号

如果在一个模块化工程中使用它，必须要通过Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

二、代码配置

在src文件夹下新建router文件夹，在router文件夹下新建index.js文件，用来配置router的代码配置；在src文件夹下新建views文件夹，用来包含所有组件

代码配置详参官方文档

打开配置配置文件：

0. (如果使用vue-cli) 导入Vue和VueRouter，调用 Vue.use(VueRouter)
1. 创建/引入（路由）组件
2. 定义路由/将路由与组件进行映射
每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象（不知道在说什么） 
3. 创建 router 实例，然后传 `routes` 配置

new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

4.将当前的router实例对外进行暴露
5. 将router挂载到根节点上。
根节点在main.js中，记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能

import router from './router' // router文件夹会默认读取index.js文件
new Vue({
  router
}).$mount('#app')

6.设置路由出口
将路由匹配的组件渲染在指定位置。因为页面内容渲染在App.vue中，所以我们在App.vue中设置路由出口

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

运行代码，发现eslint对代码规范检验报错，可以在vue.config.js配置文件中关闭eslint

module.exports = defineConfig({
  lintOnSave:false // 关闭eslint校验
})

修改url中的路由名称可以看到不同组件的内容

三、嵌套路由的配置

创建一个主路由
在src/router/index.js中配置嵌套路由，在Main.vue中设置子路由出口

const routes = [
    // 配置主路由
    {
        // 外层路由
        path:'/',
        component:Main,
        children:[
            // 嵌套路由/子路由:它们的路由出口在Main.vue中
            { path: 'home', component: Home },
            { path: 'user', component: User }
        ]
    }
]

ps：补充一个小知识点：

"./"：代表目前所在的目录。

" . ./"代表上一层目录。

"/"：代表根目录。