vue路由使用以及组件扩展

组件ref的使用

  获取dom节点

  1. 给dom节点记上ref属性，可以理解为给dom节点起了个名字。
  2. 加上ref之后，在$refs属性中多了这个元素的引用。
  3. 通过vue实例的$refs属性拿到这个dom元素。

   获取组件

  1. 给组件记上ref属性，可以理解为给组件起了个名字。
  2. 加上ref之后，在$refs属性中多了这个组件的引用。
  3. 通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。
<body>
    <div id='app'>
        <div id="box" ref="boxref">132456</div>
        <son id="box2" ref="sonref"></son>
    </div>
<template id="son">
    <div>
        你好
    </div>
</template>
    <script>
        Vue.component("son",{
            template:"#son",
            data() {
                return {}
            },
        })
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
        mounted () {
            document.getElementById("box").style.color="red"
            document.getElementById("box2").style.color = "green"
　　dom元素
            console.log(this.$refs.boxref);
　　　　组件
            console.log(this.$refs.sonref.$el);

            this.$refs.boxref.style.fontSize="30px"
            this.$refs.sonref.$el.style.fontSize="30px"          
        }
    })
    </script>
</body>
 
路由的使用
<body>
    <div id="app">
      <!-- 1 -->
      <!-- 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
      2 创建路由new VueRouter(),接受的参数是一个对象 3
      在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
      4 path属性是url的地址,component属性就是显示的组件（传组件的对象） 5
      创建的路由需要和vue实例关联一下 6 路由到的组件显示在哪个位置router-view -->
      <!-- 5.预留展示区域 -->
      <router-view></router-view>
    </div>

    <template id="index">
      <div>首页</div>
    </template>
    <template id="detail">
      <div>详情页面</div>
    </template>

    <script>
        let login = {
            template:"#index",
            data(){
                return{

                }
            },
            methods:{

            },
            created() {
               
            },
        }


      // 2 创建VueRouter 实例
      const router = new VueRouter({
        // 3.配置路由映射关系
        routes: [
          {
            path: "/",
            component: login,
          },
          {
            path: "/detail",
            component: {
              template: "#detail",
            },
          },
        ],
      });

      // 4 将vuerouter挂载在vue实例上
      const vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        // router:router
        router,
      });
    </script>
  </body>
 
路由跳转
 声明式跳转，和函数式跳转
 
 声明式跳转:<router-link to="path:' 跳转地址' "></router-link>
 
函数式跳转 ：在函数里用 this.$router.push("跳转地址")
 
 
路由高亮：就是给当前跳转的页面一个效果
.router-link-active  写一个样式
posted @ 2022-01-16 13:43  ..Shmily  阅读(52)  评论(0)    收藏  举报