关于vue-router路径配置的问题（此文主要是记录三级路由的访问路径，以及安装、路由组件、路由重定向）

一、路由的定义

1. node路由：用户根据不同的url地址，来访问不同的页面

2. vue路由（客户端）：组件结合路由规则来构建单页面应用

二、下载安装

npm ——>终端输入npm i vue-router@3 -S ——>回车 （@3为版本的意思）

npm i vue-router@3 -S

三、系统提供的路由组件

<router-view></router-view> //路由出口

<router-link to=""></router-link> //路由导航

四、路由的重定向

1.一级路由重定向

{path:'*',             // *:任何不存在的路径redirect:'/contact'   //重定向路径 
}   

2.二级路由重定向

{path:'/index',         // index:一级路由地址redirect:'/index/home'   //重定向路径 
}

五、基本使用

1. 在router文件夹下的index.js文件中创建并导出路由

// 引入vue模块
import Vue from 'vue'
// 引入VueRouter模块
import VueRouter from 'vue-router'
// Vue显示注册VueRouter
Vue.use(VueRouter)/*** 创建路由对象* 接收参数是一个options: {}* 该对象中包含很多个选项: routes* 得到router对象* **/ 
const router = new VueRouter({});// 导出
export default router

2. 在main.js中引入路由

import Vue from 'vue'
import App from './App.vue'// 引入路由
import router from '@/router'Vue.config.productionTip = false// new Vue实例选项中包含很多选项: data,methods,router(路由)
new Vue({router,render: h => h(App),
}).$mount('#app')

3. 使用步骤：

（1）引入组件 （2）配置路由规则 （3）设置路由出口

例如：在router文件夹下的index.js文件中执行（1）（2）

// 1.引入组件
import Login from '@/pages/Login'/*** 创建路由对象* 接收参数是一个options: {}* 该对象中包含很多个选项: routes* 得到router对象* **/ 
const router = new VueRouter({// 2.设置路由规则（多个路由规则用逗号隔开）routes:[{path:'/login',//访问的路径component:Login},]
});

在APP.vue中执行（3）

<template><div><!-- 设置路由出口 --><!-- vue-router系统中提供的组件 --><router-view></router-view></div>
</template>

六、一级路由、二级路由、三级路由的访问路径

（1）一级路由。其路径为：/index

//配置路由规则
const routes=[{path:'/index',  //一级路由访问路径  ‘/index’component:Index, //Index是引入路由文件时定义的路由名称}
]

（2）二级路由：在一级路由之后使用children属性。其路径为：/index/management

（二级路由在path时不能加/）

//配置路由规则
const routes=[{path:'/index',  //一级路由访问路径  ‘/index’component:Index, //Index是引入路由文件时定义的路由名称childern:[path:'management',    //二级路由访问路径 '/index/management'component:Manageme,   //  Manageme是引入路由文件时定义的路由名称]}
]

（3）三级路由：在二级路由之后使用children属性。其路径为：/index/management/mgoodcate

//配置路由规则
const routes=[{path:'/index',  //一级路由访问路径  ‘/index’component:Index, //Index是引入路由文件时定义的路由名称childern:[path:'management',    //二级路由访问路径 '/index/management'component:Manageme,   //  Manageme是引入路由文件时定义的路由名称childern:[path:'mgoodcate',    //二级路由访问路径 '/index/management/mgoodcate'component:Mgoodcate,   //  Manageme是引入路由文件时定义的路由名称]]}
]

（我之前在网上查的时候，有人说三级路由的路径地址前不用加一级路由地址，但是我只有都加上才能访问，大家可以自行尝试）