Vue day06 路由

Vue day06 路由

补充

父传子props的约束条件：

父传子：子接收用对象方式，那么可以增加约束条件
在child.vue中
 props: {
      msg:{
        // 必填项
         required:true,
        // 值得类型
         type:Boolean 
      },
      cont:{
        //   参数默认值
          default(){
              return '请输入内容'
          }
      }
  },

slot作用域插槽（字传父父展示）:

子组件

    <!-- slot 作用域插槽  父组件要用子组件的数据-->
   slot.vue中
   <v-one> <p slot-scope="msg">我是从one组件拿来的数据--------{{msg}}</p> </v-one>
  在 one.vue中
<template>
<div>
    one
    我是one子组件的{{msg}}
    <slot :msg='msg'></slot>
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     msg:'我是子组件的data'
 }
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>

一、路由

1.安装

cnpm i vue-router --save

2.安装和配置路由

// 安装路由
// import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//路由的配置  main.js中

import login from './components/login.vue'
import index from './components/index.vue'
const router = new Router({
  // 配置路由规则
  routes:[
    {
      path:'/login',
      component:login
    },
    {
      path:'/index',
      component:index
    }
  ]
})

new Vue({
  // 配置路由
  router:router,
})

3.路由出口

App.vue中
路由出口
<router-view></router-view>

4.路由嵌套

main.js中

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)
import login from '../page/login'
import foot from '../page/foot'
import index from '../page/index'
import footDetile from '../page/footDetile'
import move from '../page/move'
import moveDetile from '../page/moveDetile'
//二级路由
import home from '../page/home'
import order from '../page/order'
import me from '../page/me'

export default new Router({
  routes: [

   {
    path:'/index',
    component:index,
    children:[
      {
        path:'home',
        component:home
      },
      {
        path:'order',
        component:order
      },
      {
        path:'me',
        component:me
      },
      {
        path:'',
        redirect:'home'
      }
    ]
  },
  {
    path:'/foot',
    component:foot
  },
  {
    path:'/footDetile/:id',
    component:footDetile
  },
  {
    path:'/move',
    component:move
  },
  {
    path:'/moveDetile/:id',
    component:moveDetile
  },

  {
    path:'/login',
    component:login
  },
  {
    path:'/',
    component:login

  },
  {
    path:'*',
    redirect:login
  }

  ]
})

5.路由定向

一级路由
重定向路由配置最后写：
{
path："*",
redirect:'login'
}

二级路由
重定向路由配置最后写：
{
	path:'',
	redirect:'man'	
}

6.编程式导航

this.$router.push()  
this.$router.replace() 
this.$router.go(-1)

总结: this.$router.push()  会产生一条新的历史记录
      this.$router.replace()  会覆盖当前的路径，返回的是上上一级  不会产生新的历史记录  

7.动态路由

语法; 路由  /foodDetail/:id  
在二级分类下有多个地址栏后需要跟id值
在food.vue中
 <div @click="toDetail(item.id)" v-for='item in arr' :key='item.id'>
        <div>名字:{{item.name}}</div>
        <div>价格:{{item.price | filterPrice}}</div>
    </div>
   <script>
   methods:{
    toDetail(id){
        // /foodDetail/3
        this.$router.push('/foodDetail/'+id)
   }  
}</script>

8.动态传参

1). ？ 传参

 <router-link :to='"/foodDetail?id="+item.id' v-for='item in arr' :key='item.id'>
        <div>名字:{{item.name}}</div>
        <div>价格:{{item.price | filterPrice}}</div>
    </router-link>

2）动态传参

<div v-for="item in arr" :key='item.id' @click='footdetile(item.id)' class="box">
     <div class="a">名字:{{item.name}}</div>
    <div class="a">价格:{{item.price | filterPrice}}</div>
</div>
methods:{
    footdetile(id){
        this.$router.push('/footDetile/id='+id)
    }
},

二、美团案例

1.创建目录结构

—src

​ --page 所有页面

​ --common 公共组件

​ --filter 过滤器

​ --util 工具类 （正则验证，数据请求等等）

​ --components 页面中的某一部分组件

2.清空工作

​ App.vue router->index.js

3.画页面

index.vue login.vue food.vue foodDetail movie movieDetail home order mine

配置路由 router->index.js

三、动画的使用

npm install animate.css --save

 <transition  enter-active-class='animate__animated animate__fadeInUp' 
     leave-active-class='animate__animated animate__bounceOutDown'>
        <!-- 二级出口 -->
    <router-view></router-view>
    </transition>