zoukankan      html  css  js  c++  java
  • vue从一个组件跳转到另一个组件页面router-link的试用

    需求从helloworld.vue页面跳到good.vue页面

    1.helloworld.vue页面代码

    <template>
      <div class="hello">
          我是小可爱
             <router-link :to="{ path: '/cute'}" replace>点我啊,傻</router-link>
      </div>
    </template>
    
    <script>
    import Good from './good'
    export default {
      name: 'HelloWorld',
      components: { Good },
      data: function () {
        return { }
      },
      methods:{
        clickIt:function (){
          window.location.href="/cute"
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

    2. good.vue页面

    <template>
      <div class="hello">
         我是你的小可爱
    
      </div>
    </template>
    
    <script>
    export default {
      name: 'cute',
      data: function () {
        return { }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

     3.index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import cute from '@/components/good'
    
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/cute',
          name: 'cute',
          component: cute
        },
    
      ]
    })

  • 相关阅读:
    文章分类
    多项式笔记(二)
    P7102 [w3R1] 算
    P3711 仓鼠的数学题
    常见特殊数的多项式求法
    P4091 [HEOI2016/TJOI2016]求和
    CF961G Partitions
    P4609 [FJOI2016]建筑师
    P5401 [CTS2019]珍珠
    P5162 WD与积木
  • 原文地址:https://www.cnblogs.com/antyhouse/p/9157138.html
Copyright © 2011-2022 走看看