一、路由的定義

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.一級(jí)路由重定向

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

2.二級(jí)路由重定向

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

五、基本使用

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

// 引入vue模塊
import Vue from 'vue'
// 引入VueRouter模塊
import VueRouter from 'vue-router'
// Vue顯示注冊(cè)VueRouter
Vue.use(VueRouter)/*** 創(chuàng)建路由對(duì)象* 接收參數(shù)是一個(gè)options: {}* 該對(duì)象中包含很多個(gè)選項(xiàng): routes* 得到router對(duì)象* **/ 
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實(shí)例選項(xiàng)中包含很多選項(xiàng): 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)建路由對(duì)象* 接收參數(shù)是一個(gè)options: {}* 該對(duì)象中包含很多個(gè)選項(xiàng): routes* 得到router對(duì)象* **/ 
const router = new VueRouter({// 2.設(shè)置路由規(guī)則（多個(gè)路由規(guī)則用逗號(hào)隔開）routes:[{path:'/login',//訪問的路徑component:Login},]
});

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

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

六、一級(jí)路由、二級(jí)路由、三級(jí)路由的訪問路徑

（1）一級(jí)路由。其路徑為：/index

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

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

（二級(jí)路由在path時(shí)不能加/）

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

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

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

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