vue路由
多个url对应多个HTML文件 多个url对应一个HTML文件，切换的是组件
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>
