vue路由

多个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>