zoukankan      html  css  js  c++  java
  • vue2 vue-router 组装

    适用于vue cli搭建的项目

    vue-router模块下载及记录到package.json中:

    npm i vue-router -D
    main.js中:
    import VueRouter from ‘vue-router’   //引入模块
    Vue.use(VueRouter)            //使用模块,VueRouter模块里面自带有个install方法,能被Vue.use方法识别。
    const router = new VueRouter({        
      routes:[               //参数样式 {routes:[aaa,bbb]} ,必须是routes:xxx
        {path:'/xxx',component:aaa},
        {path:‘/xxx’,component:bbb}
      ]
    })
    new Vue({
      router  //将router 实例 挂载到new Vue中就能使用了
      
    })
    //了解上面的内容,就足够了,其余的只是参数的拼接。

    改写如下:
    import VueRouter from ‘vue-router’
    Vue.use(VueRouter)  
    import route1 from ‘./router.config.js’ //这儿是router.config.js的路径。如果设置routes为变量名,下面那行代码参数就写:{routes},代表{routes:routes}
    const router = new VueRouter({routes:route1}) 

    router.config.js中

    import aaa from './aaa.vue' //从文件地址引入aaa组件。
    import bbb from './bbb.vue' //从文件地址引入bbb组件。

    export default[        //依据VueRouter的参数模式 拼接。 由于main.js参数写法,这儿正好输出json格式:[{},{}]
      {
        path:'/home',
        component:aaa
      }
    ]


    使用:

    <router-link to='/home'>点击转到aaa组件</router-link>
    <router-view></router-view> <!--这儿是显示aaa组件的地方。-->

    大概思路:

        引入vue-router模块→Vue.use(模块)→实例化→挂载实例→使用

        实例化的参数:new VueRouter({routes:[{path:'/xxx',component:aaa},{path:‘/xxx’,component:bbb]})

        参数拼接:一般是将json放在config.js中,输出这个json,在main.js中引入这个json,进行拼接。这样做是为了代码清晰。

  • 相关阅读:
    Atitti  css   transition Animation differ区别
    Atitit 游戏引擎物理系统(1)爆炸效果
    Atitit.rsa密钥生成器的attilax总结
    新特性AAtitti css3 新特性attilax总结titti css
    Atitit 异常的实现原理 与用户业务异常
    Atitit.uke 团队建设的组织与运营之道attilax总结
    atitit 业务 触发器原理. 与事件原理 docx
    Atitit 基于dom的游戏引擎
    Atitit 团队建设的知识管理
    Javascript判断页面刷新或关闭的方法(转)
  • 原文地址:https://www.cnblogs.com/gsgs/p/6725228.html
Copyright © 2011-2022 走看看