vue路由

最新推荐文章于 2023-04-19 21:52:28 发布

wz990223

最新推荐文章于 2023-04-19 21:52:28 发布

阅读量108

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/wz990223/article/details/118274372

版权

子组件传值父组件

子组件调用父组件的方法

在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
子组件可以触发这个事件$emit('事件名字')

 <template id="father">
    <div>
      父组件
      <son @formfather='fromson'></son>
      子组件{{msg}}
    </div>
  </template>
 methods: {
        fromson(data) {
          console.log(data);
          this.msg = data
        }
      }

子组件给父组件传递数据

$emit方法第二个参数可以定义子组件给父组件传递的内容
在父组件中怎么拿到这内容

2.1 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
2.2 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

<template id="son">
    <div>
      子组件
      <button @click="tofather">点击传值</button>
    </div>
  </template>
methods: {
        tofather() {
          console.log(111111);
          // 传值
          this.$emit("formfather", this.num)
        }
      }

ref的使用

获取dom节点

给dom节点记上ref属性。
加上ref之后，在$refs属性中多了这个元素的引用。
通过vue实例的$refs属性拿到这个dom元素。

获取组件

给组件记上ref属性。
加上ref之后，在$refs属性中多了这个组件的引用。
通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

<template id="father">
    <div>
      父组件
      <div ref="father">炸鲜奶</div>
      <son ref="son"></son>
    </div>
  </template>
Vue.component('father', {
      template: '#father',
      mounted() {
        console.log(this.$refs)
        console.log(this.$refs.son.num1)
        // 可以拿到son的方法
        console.log(this.$refs.son.sum(1, 3))
        console.log(this.$refs.father)
        // 可以操纵元素
        this.$refs.father.style.color = "red"
      }
    })

Vue中路由的使用

什么是路由

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

路由的基本使用

1、引入

2、创建路由

3 、创建组件和路由映射关系

4、创建的路由需要和vue实例关联一下

5、路由到的组件显示在哪个位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 1、引入 -->
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<body>
  <div id="app">
    <!-- 5、路由到的组件显示在哪个位置 -->
    <router-view></router-view>
  </div>

</body>
<template id="father">
  <div>
    我是爸爸
  </div>
</template>
<template id="son">
  <div>
    我是儿子
  </div>
</template>

</html>
<script>
  let father = Vue.component('father', {
    template: '#father'
  })
  // 可以省略Vue.component
  let son = ('son', {
    template: '#son'
  })
  // 2、创建路由
  const router = new VueRouter({
    // 3 .创建组件和路由映射关系
    routes: [
      {
        path: '/',
        component: father,
      },
      {
        path: '/son',
        component: son
      }
    ]
  })
  //创建Vue实例,得到 ViewModel
  const vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    // 4创建的路由需要和vue实例关联一下
    router,
  });
</script>

路由的跳转

router-link标签可以设置to属性
默认是a标签，可以通过tag设置包裹标签

<template id="father">
  <div>
    我是爸爸
    <router-link to="/son">去儿子家</router-link>
    <router-link to="/son" tag="h2">改变孩子的标签</router-link>
  </div>
</template>
<template id="son">
  <div>
    我是儿子
    <router-link to="/father">去老爸家</router-link>
  </div>
</template>

路由重定向

redirect可以进行路由的重定向

{

        path: '/',

        redirect: '/son'

      },

选中路由高亮

1.使用默认的样式直接设置router-link-active

2.自定义样式配置 linkActiveClass:'自定义的类名'

路由传参

1、定义参数

通过query的方式在url后加?参数名=参数的值

获取参数：$route.query.参数名

<template id="son">
  <div>
    我是儿子
    <router-link to="/father?courseid=103">去老爸家</router-link>
    <!-- 路由传参 -->
    <router-link :to="{path:'/father',query:{course:103}}">去老爸家2</router-link>
    <router-link :to="{path:'/father',query:{course:courseid}}">去老爸家3</router-link>
    <router-link to="/son">去儿子家</router-link>
  </div>
</template>

2、使用浏览器参数的方式传递参数

设置路由的时候/路由地址/:参数名

获取参数$route.params.参数名

<template id="father">
  <div>
    我是爸爸
    <router-link to="/son">去儿子家</router-link>
    <router-link to="/father">去老爸家</router-link>
    <!-- <router-link to="/son" tag="h2">改变孩子的标签</router-link> -->
    <router-link :to="{name:'son',params:{id:777}}"> 去儿子家2</router-link>
    <router-link :to="{name:'son',params:{id:fatherdata1,nama:'lisi'}}"> 去儿子家3</router-link>
  </div>
</template>

3、js跳转

去爸爸家1

methods: {
    tofather() {
      // this.$router.push({ name: "daughter", params: { like: "茶百道" } });
      this.$router.push({ path: "/father", qurey: { father: 111 } });
    },
  },

wz990223

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue路由

子组件传值父组件子组件调用父组件的方法在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）子组件可以触发这个事件$emit('事件名字') <template id="father"> <div> 父组件 <son @formfather='fromson'></son> 子组件{{msg}} </div> </template> me
复制链接

扫一扫