多個url對應多個HTML檔案 多個url對應一個HTML檔案，切換的是元件

1、安裝

Install vue-router? (Y/n)  Y

2、路由出口

<router-view></router-view>

3、路由導航元件

<router-link to="/login">去登入頁</router-link>

4、一級路由規則

  // 配置路由規則
  routes: [{
    path: '/login',
    component: login
   }, {
    path: '/home',
    component: home
   }, {
    path: '/mine',
    component: mine
   }, {
    // 一級路由重定向
    path:"*",
    redirect:"/login"
   }
  ]
 

5、二級路由規則

{
   path: '/home',
   component: home,
   children: [{
    // 二級路由不用寫/
     path: 'man',
     component: man
    },
    {
     path: 'woman',
     component: woman
    },
    {
     // 二級路由的重定向不用寫*，直接空字串就好了
     path:"",
     redirect: "man"
    }
   ]
  }

6、導航選中的樣式

active-class 當它被啟用的時候

<router-link to="/home/man" active-class="active">男裝</router-link>
<router-link to="/home/woman" active-class="active">女裝</router-link>
<router-link to="/home/child" active-class="active">童裝</router-link>
 

7、程式設計式導航

this.$router.push()  //新增一條新的歷史記錄
this.$router.replace()  //用新的歷史記錄替換掉當前歷史記錄
this.$router.go()  //返回

8、路由小結

1、$route和$router
 $route 是路由資訊
 $router 是路由物件，用來做路由跳轉
2、路由傳參
 2.1?傳參 "/foodDetail?id=2&age=77"
 獲取引數：this.$route.query.id
 2.2動態路由傳參 "/foodDetail/"+id 
 修改規則：{path:"/foodDetail/:id"} 
 獲取引數：this.$route.params.id
 

9、animate.css

1、安裝

npm i animate.css --save

2、在main.js中引入

import "animate.css"

3、使用

<transition enter-active-class="animate__animated animate__bounceInDown">
  <router-view></router-view>
</transition>