使用vue-router,vue-resource,VUX简单案例

最新推荐文章于 2021-03-23 15:18:32 发布

原创最新推荐文章于 2021-03-23 15:18:32 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用 Vue.js 构建的简单应用案例，演示了如何通过 Vue Router 进行页面导航与参数传递，并展示了基本的组件结构及数据请求方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建四个基本的组件

Home.vue
<template>
  <div id="home" class="home-box">
   首页
  <button @click="goNews()">通过js点击跳转到新闻页</button>

  </div>

</template>



<script>
  
  export default {
    data(){
      return{
          msg:"首页组件",
          name:"父子组件传值---值在父亲这边定义的",
          name2:"父组件的title",
          goodsList:[]
      }
    },
    methods:{

         goNews(){

           this.$router.push({path:"news"})

         }


    },
    components:{

    },
    mounted(){

    }


  }



</script>

<style lang="scss" scoped>

  .list{

    li{
      height:3.4rem;

      line-height:3.4rem;

      boder-bottom:1px solid #eee;

      font-size:1.6rem;

      a{

        color:#666;


      }
    }
  }

</style>

News.vue

<template>
    <div>
      <h2>新闻列表组件</h2>
      <ul>
        <li v-for="item in goodsList">
          <router-link :to="'/gContent?id='+item.aid">
            {{item.title}}
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>



    export default {
      data(){

        return{
              msg:"父组件的msg",
          goodsList:[
              ]
        }
      },
      components:{

      },
      methods:{

        RequestData(){

          var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"
          this.$http.jsonp(api).then((response)=>{

            this.goodsList = response.body.result
          },(err)=>{
            console.log(err);
          })

        }

      },
      mounted(){
        this.RequestData();
      }
    }
</script>

<style lang="scss" scoped>

</style>

APP.vue

<template>
  <div id="app">
    <header >

      <router-link to="/home">首页</router-link>
      <router-link to="/news">新闻页</router-link>
      <router-link to="/user">用户</router-link>

    </header>
    <div  class="vue-Router" >
      <router-view></router-view>
    </div>
  </div>
</template>

mian.js

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import VueRouter from  'vue-router'

//1.引入并 Vue.use(VueRouter)   (main.js)
Vue.use(VueResource);
Vue.use(VueRouter);

//2.配置路由 创建组件 引入组件 定义路由  （建议复制s）

import home from './components/Home.vue';
import news from './components/News.vue';
import user from './components/User.vue';
import gContent from './components/Gcontent.vue';

  import addUser from  './components/User/addUser.vue';
  import listUser from  './components/User/listUser.vue';

const routes = [
  { path: '/home', component: home },
  { path: '/news', component: news },
/*  { path: '/content/:id',component:content},*/  /* 用/:id 的方法传值，获取用this.$route.params*/
  { path: '/gContent',component:gContent},  /* 用/?id=123 的方法传值，获取用this.$route.query*/
  /*{ path: '*', redirect: '/home' },*/
  //路由的嵌套，先配置父路由，/user ，再配置子路由的属性  最后<router-link to="/user/userlist"></router-link>
  {
    path:'/user',component:user,
    children:[
      {
        path: 'useradd', component: addUser
      },
      {
        path: 'userlist', component: listUser

      }
    ]


  }

  /*  默认跳转路由*/
];

//3.实例化VueRouter
const router = new VueRouter({
  mode: 'history', //hash模式改为history模式 可以使访问的url不同
  routes // （缩写）相当于 routes: routes
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});