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/3this.$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>

Vue day06 路由相关推荐

vue react 路由history模式刷新404问题解决方案
vue react 路由history模式刷新404问题解决方案参考文章: (1)vue react 路由history模式刷新404问题解决方案 (2)https://www.cnblogs.co ...
vue的路由与es6的import, export
vue主要用来实现前端模块化编程, 它的最终代码是一些序列化的js,简单的index.html访问入口,和一些image, vue的js使用es6来模块化设计, 为什么要这么做呢,我想主要是为了前端与 ...
vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...
Vue 切换路由后页面回到页面顶部
Vue 切换路由后页面回到页面顶部 backTop() {window.scrollTo(0, 0)document.body.scrollTop = 0document.documentElemen ...
【Vue】路由Router嵌套的实现及经典案例
Vue 中路由在使用的时候嵌套使用是非常频繁的,所以本文我们就来通过案例介绍一下嵌套路由的使用. Vue路由嵌套先来准备一个普通的路由案例: <!DOCTYPE html> < ...
vue二级路由跳转后外部引入js失效问题解决方案
vue二级路由跳转后外部引入js失效问题解决方案参考文章: (1)vue二级路由跳转后外部引入js失效问题解决方案 (2)https://www.cnblogs.com/LittleT/p/9077 ...
Vue笔记（四）——Vue动画路由
过渡效果过渡效果应用场景条件渲染(使用v-if) 条件展示(使用v-show) 动态组件(使用:is) 组件根节点过渡状态 opacity:0 ==> 1 enter ==>ente ...
Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式定义动态参数 {path:'/user/:id/:name', ...

Vue day06 路由

Vue day06 路由

补充

一、路由

二、美团案例

三、动画的使用

Vue day06 路由相关推荐

最新文章

热门文章