美文网首页前端技术
Vue路由模块化

Vue路由模块化

作者: 剑有偏锋 | 来源:发表于2018-08-14 17:08 被阅读105次

一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 安装sass vue-router vue-resource

cnpm install node-sass sass-loader --save
cnpm install vue-router --save
cnpm install vue-resource --save

五 修改代码

├── src
│ ├── App.vue
│ ├── components
│ │ ├── Content.vue
│ │ ├── Home.vue
│ │ ├── News.vue
│ │ ├── User
│ │ │ ├── AddUser.vue
│ │ │ └── UserList.vue
│ │ └── User.vue
│ ├── main.js
│ └── router
│ └── router.js

App.vue

<template>
  <div id="app">
    <header class="header">
    <router-link to="/home">home</router-link>
    <router-link to="/news">news</router-link>
    <router-link to="/user/userlist">user</router-link>
    </header>
    <hr>
    <br>
    <router-view></router-view>

  </div>
</template>

<script>

import Home from './components/Home.vue';
import News from './components/News.vue';
import User from './components/User.vue';

export default {
  name: "app",
  data() {
    return {
      msg:'hello vue world!',     
    };
  },
  components:{
    'v-home':Home,
    'v-news':News,
    'v-user':User
  },
};
</script>

<style>
.header{
  height: 4.4em;
  background: #000;

  color:#fff;
  line-height: 4.4rem;
  text-align: center;


}

.header a{
  color:#fff;
  padding: 0 2 rem;
}
</style>

Content.vue

<template>
    <div id="content">
        i am content


         <h2>{{list.title}}</h2>
         <div v-html="list.content"></div>
             
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg: "content",
            list: []
        }
    },
    methods:{
        requestData(aid){
            console.log(aid)
            var api = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=" + aid
        
            this.$http.get(api).then((response)=>{
                console.log(response.body.result[0])
                this.list = response.body.result[0];
            },(err)=>{
                console.log(err)
            })
        }
    },
    mounted(){
        console.log(this.$route.params)

        var aid = this.$route.params.aid;
        this.requestData(aid);
    },
}
</script>



Home.vue

<template>
    <!-- all content need in root-->
    <div>      
        Home
        <br>

         <ul>
             <li v-for="(item,k) in list" :key="item.id">
               <router-link :to="'/pcontent?id='+k">{{k}} -- {{item}} </router-link>
             </li>
         </ul>  
    </div>
</template>


<script>


export default {
    data(){
        return {
            msg:'i am home component!',
            list:['goods1', 'goods2','goods3']
        }
    }
}
</script>

<style>
</style>

News.vue

<template>
    <!-- all content need in root-->
    <div>      
        News
         <br>
         <ul>
             <li v-for="(item,k) in list" :key="item.id">
               <router-link :to="'/content/'+item.aid">{{k}} -- {{item.title}} </router-link>
             </li>
         </ul>        
    </div>
</template>


<script>

export default {
    data(){
        return {
            msg:'i am news component!',
            list:[]
        }
    },
    methods:{
        requestData(){
            var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
            
            console.log(this.$http)
            this.$http.jsonp(api).then(function(response){
                console.log(response)
                this.list = response.body.result;
            },function(err){
                console.log(err)
            })
        }
    },
    mounted(){
        this.requestData();
    }
}
</script>

<style>

</style>

AddUser.vue

<template>
    <div id="adduser">
        Add User
    </div>
</template>

UserList.vue

<template>
    <div id="userlist">
        User List
    </div>
</template>

User.vue

<template>
    <!-- all content need in root-->
    <div id="user">      
        <div class="user">
        
            <div class="left">
                <ul>
                    <li>
                    <router-link to="/user/adduser"> Add User</router-link>
                    </li>

                    <li>
                        <router-link to="/user/userlist">User list</router-link>
                    </li>
                </ul>
            </div>

            <div class="right">
                <router-view></router-view>
            </div>

        </div>
        <br>
    </div>
</template>


<script>


export default {
    data(){
        return {
            msg:'i am user component!',            
        }
    }
}
</script>

<style lang="scss">
.user{
    display: flex;
    .left{
        width: 200px;
        min-height:400px;
        border-right:1px solid #eee;
        .li{
            line-height:2;    
        }
    }

    .right{
        flex:1;
    }
}

</style>

main.js

import Vue from 'vue'
import App from './App.vue'

import './assets/css/basic.scss'

import router from './router/router.js'

import VueResource from 'vue-resource'
Vue.use(VueResource)

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

router.js

六 运行

npm run dev


image.png

七 总结

1 温习vue模块的使用
《1 创建模块文件router.js, 声明模块对象
const router = new VueRouter({
routes
})

《2 其他文件使用模块
import router from './router/router.js'

八 参考

https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

相关文章

  • 2019-06-30 路由基础、动态路由、使用axios发送Aj

    vue-router: 路由 如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能: ...

  • Vue Router学习笔记(1)

    JavaScript使用路由 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(Vu...

  • 嗷~码农你好

    git ignore vue-cli 脚手架 vue-router 模块化关闭带 # 的 url(路由的 hist...

  • react路由模块化和路由嵌套

    路由模块化的好处我就不多说了,先看下我的项目页面 开始拆分路由 定义根路由,根路由将引入子路由 在app.vue中...

  • 2018-09-24路由

    首先明白路由是什么? 路由是vue里面的一个核心插件 路由的作用是什么? 嵌套的路由/视图表模块化的、基于组件的路...

  • vue笔记9.24

    首先明白路由是什么? 路由是vue里面的一个核心插件 路由的作用是什么? 嵌套的路由/视图表模块化的、基于组件的路...

  • Vue路由模块化

    一 创建测试项目 vue init webpack-simple vuedemo 二 进入demo目录 cd vu...

  • 学习笔记《vue-router》

    使用 Vue 做 SPA 实现的时候,路由系统是无法绕过的一个重要子系统: 使用路由系统对页面进行模块化 对浏览器...

  • vue-router学习笔记

    vue-router学习笔记 安装 并且如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功...

  • Vue优雅使用技巧(二)--vuex细节使用

    Vue中vuex使用 vue的项目只要拆分出来一定要做到 模块化处理,不管是路由,数据状态,组件,混入,指令,过滤...

网友评论

    本文标题:Vue路由模块化

    本文链接:https://www.haomeiwen.com/subject/xmuvbftx.html