一、路由的定義

1. node路由：用戶根據(jù)不同的url地址，來訪問不同的頁面

2. vue路由（客戶端）：組件結(jié)合路由規(guī)則來構(gòu)建單頁面應(yīng)用

二、下載安裝

npm ——>終端輸入npm i vue-router@3 -S ——>回車 （@3為版本的意思）

npm i vue-router@3 -S

三、系統(tǒng)提供的路由組件

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

<router-link to=""></router-link> //路由導(dǎo)航

四、路由的重定向

1.一級路由重定向

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

2.二級路由重定向

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

五、基本使用

1. 在router文件夾下的index.js文件中創(chuàng)建并導(dǎo)出路由

// 引入vue模塊
import Vue from 'vue'
// 引入VueRouter模塊
import VueRouter from 'vue-router'
// Vue顯示注冊VueRouter
Vue.use(VueRouter)/*** 創(chuàng)建路由對象* 接收參數(shù)是一個options: {}* 該對象中包含很多個選項: routes* 得到router對象* **/ 
const router = new VueRouter({});// 導(dǎo)出
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）配置路由規(guī)則 （3）設(shè)置路由出口

例如：在router文件夾下的index.js文件中執(zhí)行（1）（2）

// 1.引入組件
import Login from '@/pages/Login'/*** 創(chuàng)建路由對象* 接收參數(shù)是一個options: {}* 該對象中包含很多個選項: routes* 得到router對象* **/ 
const router = new VueRouter({// 2.設(shè)置路由規(guī)則（多個路由規(guī)則用逗號隔開）routes:[{path:'/login',//訪問的路徑component:Login},]
});

在APP.vue中執(zhí)行（3）

<template><div><!-- 設(shè)置路由出口 --><!-- vue-router系統(tǒng)中提供的組件 --><router-view></router-view></div>
</template>

六、一級路由、二級路由、三級路由的訪問路徑

（1）一級路由。其路徑為：/index

//配置路由規(guī)則
const routes=[{path:'/index',  //一級路由訪問路徑  ‘/index’component:Index, //Index是引入路由文件時定義的路由名稱}
]

（2）二級路由：在一級路由之后使用children屬性。其路徑為：/index/management

（二級路由在path時不能加/）

//配置路由規(guī)則
const routes=[{path:'/index',  //一級路由訪問路徑  ‘/index’component:Index, //Index是引入路由文件時定義的路由名稱childern:[path:'management',? ? //二級路由訪問路徑 '/index/management'component:Manageme,? ?//? Manageme是引入路由文件時定義的路由名稱]}
]

（3）三級路由：在二級路由之后使用children屬性。其路徑為：/index/management/mgoodcate

//配置路由規(guī)則
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是引入路由文件時定義的路由名稱]]}
]

（我之前在網(wǎng)上查的時候，有人說三級路由的路徑地址前不用加一級路由地址，但是我只有都加上才能訪問，大家可以自行嘗試）