关于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是引入路由文件时定义的路由名称
                              ]
                  ]
    }
]

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