网站建设资讯

NEWS

网站建设资讯

vue学习

Vue CLI 3.0介绍:

目前成都创新互联公司已为近1000家的企业提供了网站建设、域名、网站空间、网站托管、服务器租用、企业网站设计、黑龙江网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

https://cli.vuejs.org/zh/guide/ 

Vue CLI 3.0配置参考

https://cli.vuejs.org/zh/config/ 

https://youzan.github.io/vant/#/zh-CN 

hub.com/shimiso/VueFrameWork

https://shimiso.github.io/VueFrameWork/dist/#/

https://github.com/shimiso/VueDemo

这是我们组内搞的vue的学习视频,40节课demo,一周上手,2周出活

https://edu.csdn.net/course/detail/5342

vue路由配置

  1. index.js 中引入文件  import Reg from '@/components/Reg'

  2. 配置路由

    export default new Router({

            routes: [

                    {

                    path: '/',

                    component: HelloWorld,

                    },

                    {

                    path: '/login',

                    component: Login,

                    },

                    {

                    path: '/reg',

                    component: Reg,

                    },

            ]

    })

3.创建文件

    

    

    

Vue 公用文件配置

  1. 创建公用文件 Footer.vue

        

        

        

  2. 引入文件

    import ComHeader from './components/common/Header'

    import ComFooter from './components/common/Footer'

  3.注册标签

    export default {

        name: 'App',

        components:{

            ComHeader,

            ComFooter,

        }

    }

  4.引入标签 

    

守卫

全局守卫(main.js)

router.beforeEach((to, from, next) => {

    //会在任意路由跳转前执行,next一定要记着执行,不然路由不能跳转了

    alert(111);

    next();

})

独享路由守卫

export default new Router({

routes:

    [

            {

            path: '/',

            component: HelloWorld,

            },

            {

            path: '/login',

            component: Login,

            beforeEnter: (to, from, next) => {

            // ..

            console.log('经过路由守卫');

            }

            },

            {

            path: '/reg',

            component: Reg,

            },

            {

            path: '/user',

            component: User,

            },

      ]

})



网页标题:vue学习
本文网址:http://njwzjz.com/article/gsdpec.html