1. 在路由器中添加route
    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Test from '@/components/test/Test'
    import Drect from '@/components/direct/Drect'
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        //触发跳转的组件
        {
          path: '/test',
          name: 'Test',
          component:Test
        },
        //跳转的目标组件
        {
          path: '/drect',
          name: 'Drect',
          component:Drect
        },
      ]
    })
    

     

  2. 触发跳转的组件
    <template>
        <div>
            <span>在这里测试跳转页面</span>
            <input type="button" value="点击跳转" @click="directe()">
        </div>
    </template>
    <script>
    export default {
        methods: {
            directe() {
                this.$router.push({path: '/drect',query:{id:'1',name:'小青'}});
            }
        }
    }
    </script>
    <style>
    </style>
    
    
    
    

     

  3. 跳转到的组件及参数的接受
    <template>
        <div>
            <span>这是要跳转到的页面</span>
            <br>
            <span>Id:{{$route.query.id}}  名字:{{$route.query.name}}</span>
        </div>
    </template>
    <script>
    export default {
        created() {
            console.log(this.$route.query.id)
        }
    }
    </script>
    <style>
    
    </style>
    
    

     

Logo

前往低代码交流专区

更多推荐