1 import VueRouter from 'vue-router'
 2 import Vue from 'vue'
 3 
 4 // 1.通過Vue.use(外掛),安裝外掛
 5 Vue.use(VueRouter)
 6 
 7 // 2.建立VueRouter物件
 8 const router = new VueRouter({
 9   //配置路由與元件之間的關係
10   routes
11 })
12 
13 // 3.routes對映關係傳入router例項中
14 const routes = [
15 
16 ]
17 
18 // 4.打包匯出
19 export default
 
 router

5.專案main.js檔案匯入router，並在vue例項中使用router

main.js檔案：

 1 import Vue from 'vue'
 2 import App from './App'
 3 //5.root元件引入路由
 4 import router from './router/index.js'
 5 
 6 Vue.config.productionTip = false
 7 
 8 /* eslint-disable no-new */
 9 // 6.Vue例項引入router物件
10 new Vue({
11   el: '#app',
12   router,
 
13   render: h => h(App)
14 })

以上步驟只是搭建了路由的框架，接下來配置路由與元件之間的關係，因此要先建立元件。

6.component下建立元件檔案（about.vue,home.vue）

7.router/index.js中引用Home元件和About元件

8、配置路由與元件的對映關係：

備註：routes對應關係的程式碼必須寫在建立router物件之前

9.root元件中使用<router-link><router-view>標籤

router/index.js如下

 1 import VueRouter from 'vue-router'
 2
 
 import Vue from 'vue'
 3 import Home from '../components/Home'
 4 import About from '../components/About'
 5 
 6 // 1.通過Vue.use(外掛),安裝外掛
 7 Vue.use(VueRouter)
 8 
 9 // 3.routes對映關係傳入router例項中
10 const routes = [
11   {
12     path:'/home',
13     component:Home
14   },
15   {
16     path:'/About',
17     component:About
18   },
19 ]
20 
21 
22 // 2.建立VueRouter物件
23 const router = new VueRouter({
24   //配置路由與元件之間的關係
25   routes
26 })
27 
28 // 4.打包匯出
29 export default router

App.vue如下：

 1 <template>
 2   <div>
 3     <router-link to="/home">首頁</router-link>
 4     <router-link to="/about">關於</router-link>
 5     <router-view></router-view>
 6   </div>
 7 </template>
 8 
 9 <script>
10 
11 
12 export default {
13   name: 'App',
14 }
15 </script>
16 
17 <style>
18 
19 </style>

10.執行npm run dev，檢視頁面<router-link>本質上是a標籤，<router-view>的作用就是佔位，且等待vue的渲染展示對應元件內容

11.希望使用者第一次進入，預設展示元件。

a.目前首次進入，不展示元件

b.需要在router/index.js中設定預設展示元件

當路徑為空時，重定向到/home中

程式碼如下：

 1 import VueRouter from 'vue-router'
 2 import Vue from 'vue'
 3 import Home from '../components/Home'
 4 import About from '../components/About'
 5 
 6 // 1.通過Vue.use(外掛),安裝外掛
 7 Vue.use(VueRouter)
 8 
 9 // 3.routes對映關係傳入router例項中
10 const routes = [
11   {
12     path:'',
13     redirect:'/home'
14   },
15   {
16     path:'/home',
17     component:Home
18   },
19   {
20     path:'/About',
21     component:About
22   },
23 ]
24 
25 
26 // 2.建立VueRouter物件
27 const router = new VueRouter({
28   //配置路由與元件之間的關係
29   routes
30 })
31 
32 // 4.打包匯出
33 export default router

12.頁面顯示路徑是雜湊值，不好看，多了個#

去router/index.js檔案中，建立VueRouter物件時，加一個mode：history即可

 1 import VueRouter from 'vue-router'
 2 import Vue from 'vue'
 3 import Home from '../components/Home'
 4 import About from '../components/About'
 5 
 6 // 1.通過Vue.use(外掛),安裝外掛
 7 Vue.use(VueRouter)
 8 
 9 // 3.routes對映關係傳入router例項中
10 const routes = [
11   {
12     path:'/',
13     redirect:'/home'
14   },
15   {
16     path:'/home',
17     component:Home
18   },
19   {
20     path:'/about',
21     component:About
22   },
23 ]
24 
25 
26 // 2.建立VueRouter物件
27 const router = new VueRouter({
28   //配置路由與元件之間的關係
29   routes,
30   mode:'history'
31 })
32 
33 // 4.打包匯出
34 export default router

13.<router-link>的屬性

c.replace屬性：沒有這個屬性時，會有history,頁面可以回滾或則跳轉類似 history.forward,history.back。使用replace就好比histroy.replaceState，沒有Histroy

沒有使用replace屬性時，頁面可以前後跳轉

使用replace屬性，不需要填屬性值

d.預設class屬性

class屬性：這個屬性表示在router-link對應路由匹配成功時，會自動給當前元素設定一個router-link-active的class,

router-link-exact-active 這個和巢狀元件有關係，暫時先不學習。

style中直接使用這個class即可,

e.覺得router-link-active這個class屬性值太長，可以使用active-class屬性進行修改

 1 <template>
 2   <div>
 3     <router-link to="/home" tag="button" replace="" active-class="active">首頁</router-link>
 4     <router-link to="/about" replace="">關於</router-link>
 5     <router-view></router-view>
 6   </div>
 7 </template>
 8 
 9 <script>
10 
11 
12 export default {
13   name: 'App',
14 }
15 </script>
16 
17 <style>
18 .router-link-active {
19   color:red;
20 }
21 .active{
22   color:green;
23 }
24 </style>

首頁使用的是自定義的active-class，

而關於使用的是預設的class屬性 router-link-active

f.還有一種方式在router路由router/index.js中統一修改class

App.vue中定義active1

頁面效果。如果router-link中沒有定義active-class，則使用全域性配置的active1，如果router-link中使用了自定義的active-class，則使用自己配置的active

因此首頁仍然是綠色，而關於是黃色

本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/14985527.html