vue路由

vue2.0路由基本使用：

一：基本使用:

1.  布局主页

2. 路由具体写法

//组件  （就是一个大的对象）

var Home={  

       template:' 我是主页'

};

var News={   

       template:'我是新闻'

};

//配置路由

const routes=[   

       {path:'/home', componet:Home},   

       {path:'/news', componet:News}

];

//生成路由实例

const router=new VueRouter({   

         routes

});

//最后挂到vue上

new Vue({

        router,

        el:'#box'

});

3. 重定向

{ path : '*' ,  redirect : '/home'}     //其他所有的页面都指向home

二 ： 路由嵌套:

    /user/username

   const routes=[

          {path:'/home', component:Home},

          {

                path:'/user',

                component:User,

                children:[  //核心

                       {path:'username', component:UserDetail}

                 ]

            },

           {path:'*', redirect:'/home'}  

    ];

三 ： 动态路由

/user/strive/age/:age

/user/strive/age/10

vue-cli脚手架

脚手架:

vue-cli——vue脚手架

帮你提供好基本项目结构

本身集成很多项目模板:

simple         个人觉得一点用都没有

webpack     可以使用(大型项目)

      有Eslint 检查代码规范，

      有单元测试

webpack-simple    个人推荐使用, 没有代码检查 √

--------------------------------------------

基本使用流程:

1. npm install vue-cli -g      安装 vue命令环境

2. 生成项目模板

      vue init <模板名> 本地文件夹名称

      vue init webpack-simple kimi

3. 进入到生成目录里面

       cd xxx

       npm install

4. npm run dev

简单的目录结构:

     |-index.html

     |-main.js         入口文件

     |-App.vue        vue组件，官方推荐命名法

     |-package.json       工程文件(项目依赖、名称、配置)

                npm init

     |-webpack.config.js         webpack配置文件

.vue文件  :  放置的是vue组件代码 html  css   js （平时代码、ES6） 用vue-loader来整合  

单页面（SPA应用）应用使用vue-loader和vue-router来搭建