vue学习总结(四)

一.Vue Router路由管理器的使用

案例效果:

一.使用步骤:
定义一个html结构:

    <div id="app">
        <!-- 入口:使用router-link组件来导航,它会解析为a标签 -->
        <router-link to="/man">男</router-link>
        <router-link to="/women">女</router-link>

        <!-- 出口:渲染内容 -->
        <router-view></router-view>
    </div>

先导入vue和vue-router文件,可以自己下载在本地导入,但前后文件不能颠倒,要先导入vue在vue-router,不然会报错,官方在线导入如下:

1.写组件

      const Man= {//对象
            template:'<div>我是男生</div>'
        };
        const Women={
            template:'<div>我是女生</div>'
        };

2.写路由规则(配置路由单词用的是routes)

        const routes =[//数组,里面存对象,对象包含path和component(组件)属性
            {
                path:"/man",//写to的路径名
                component:Man//写组件名
        },
        {
            path:"/women",
            component:Women
        }
        ]

3.实例化路由对象,传入规则(路由对象单词是用的router)

    const router =new VueRouter({//里面传入对象
            routes//相当与于routes:routes
            // routes:routes123//属性名一定要routes,值名可以自己写和路由规则一样就可以了

        })

4.实例化Vue对象,把元素和对象传入到Vue实例中

        let app=new Vue(
            {
                el:"#app",
                router
            }
        )

二.脚手架的使用(重要,新的开发模式)

1.安装:执行下面命令

cnpm install -g @vue/cli

2.按提示一步步操作