1、安装vue-cli脚手架

a.下载安装node.js，随包同时也安装了npm;b.安装vue-cli：npm install vue-cli -g;  //全局安装，只需要安装一次，以后新建其他的项目不用安装了c.vue init webpack demo  //初始化项目，注意是vue init，而不是npm init(这个是创建package.json文件的)        先要进入我们项目的安装目录，然后执行下面的操作d.nmp install  //安装项目依赖包，也就是安装package.json里的包e.npm run dev  //开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。f.npm run build  //发布文件，项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件。

2、vue-router：SPA（单页应用）的路径管理器

☆☆ src/router/index.js，是路由的核心文件，这里面配置路由参数：引入新增加的路由文件：import Hello from '@/components/Hi'配置路由名称Hi、路径`/Hi`和对应的组件模板☆☆ 在src/components目录下，新建 Hi.vue 文件，文件包括三部分：
    

写在src/App.vue文件中的template里        
    
     [显示字段]
    ，如：        
导航 ：             
     
      首页
                  
     
      Hi页面
             

4、vue-router配置子路由

子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。步骤和2相同，不同之处在于配置路由参数，在原有的路由配置下加入children字段如：Hi1页面隶属于Hi页面

{            path:'/hi',            component:Hi,            children:[                {path:'/',name: 'Hi',component:Hi},                  {path:'hi1',name: 'Hi1',component:Hi1}                 //path值可以自定义，不必和组件名一样，name值可以不写，component的值就是组件名称            ]        }

5、vue-router参数传递

a.使用to属性传递使用router-link中的to属性进行传参，这时候的to必须使用绑定形式，即：:to☆☆router-link 定义点击后导航到哪个路径下 <router-link :to="{name:'子路由的name值',params:{key:value}}"></router-link>☆☆ name：就是我们在路由配置文件中起的name值。☆☆ params：就是我们要传的参数，它也是对象形式，在对象里可以传递多个值。☆☆ 接受参数值在模板文件里面接收(路由文件模板)，如src/compontnes/Hi1.vue用{ {$route.params.key}} b.使用url进行参数传递 在路由/src/router/index.js配置路由里面进行操作，以:冒号的形式传递参数。{ path:"/params/:newsId/:newsTitle",//表示需要传递的参数是什么component:Params}在Params.vue组件(页面)里面输出，url传递的参数值{ {$route.params.newsId}}{ {$route.params.newsTitle}}在App.vue文件里面，加上我们要传递过去的值<router-link to="/params/198/i am newsTitle">params</router-link>

6、单页面多路由区域操作

<router-view/>显示模板文件(xx.vue文件)里面的内容，对应的组件内容渲染到router-view中router-link 和router-view 标签一一对应，成对出现，router-view只出现在app.vue里面，components里面的组件都不需要加router-link 和router-view配置使得一个页面里面有2个以上<router-view>区域a。src/App.vue里面配置<router-view>，需要几个区域就写上几个<router-view>标签<router-view name="right"></router-view> //name对应components里面的值b。在router/index.js路由配置文件里面，引入对应的路由区域文件模板，如import Hi1 from '@/components/Hi1'c。配置需要在components字段里进行(注意多个router-view就是components了，加个s)。如：

{            path: '/Hi',            components: {                default:Hello,                left:Hi2,                right:Hi1            }        }

7、vue-router 的重定向-redirect

a.在src/App.vue里面新添加导航                
    
     goHome
                b.在router/index.js路由配置文件里面，不需要引入路由模板了，因为是重定向                {                    path:'/goHome',  //表示要跳转到哪里                    redirect:'/'  //重定向到首页,这里不需要component了                }            ***重定向的时候同时传递参数            a.在src/App.vue里面新添加导航                
    
     goParams
      //这里面的goParams和路由里面的path值是一样的            b.在router/index.js路由配置文件里面                {                    path:'/goParams/:id/:title',                    redirect:'/params/:id/:title'  //跳转的路径                }

8、alias别名：也可以实现类似重定向的效果

    
     xiao
      //这里面的xiao和路由里面的alias值是一样的            {                path:'/Hi1'  //需要重定向到的页面                component:Hi1  //该页面对应的组件                alias:'/xiao'  //自己取的别名            }            ☆☆redirect和alias的区别                        redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了重定向的页面的path路径。                        alias：URL路径没有改变，更友好，让用户知道自己访问的路径，只是改变了
    
     中的内容。            ☆☆填坑：别名alias请不要用在path为’/’中，如下代码的别名是不起作用的。                    {                        path: '/',                        component: Hello,                        alias:'/home'                    }
    

9、路由的过渡动画            想让路由有过渡动画，需要在
    
     标签的外部添加
     
      标签，标签还需要一个name属性。            
                      
                   
                  css过渡类名： 组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如        ** name=”fade”**,会有如下四个CSS类名：        **fade-enter**:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。    **fade-enter-active**:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。        **fade-leave**:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。        **fade-leave-active**:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。        从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。        **过渡模式mode**：        **in-out**:新元素先进入过渡，完成之后当前元素过渡离开。        **out-in**:当前元素先进行过渡离开，离开完成后新元素过渡进入。--------这种模式好
     
    

10、mode作用

此mode不是上面的过度动画里面的mode，在export default new Router({})里面设置                export default new Router({                    mode:history',                    routes:[                        {                        }                    ]                })                mode的两个值                histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！不带#                hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。

11、404页面设置

和设置子路由一样方式，只不过在path里面，值改为*

12、路由中的钩子

a.路由配置文件中的钩子函数我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。这是一个函数，有三个参数from对象、to对象、next()函数——一个开关，是否跳转到目标页面from对象：路径跳转前的路径信息，也是一个对象的形式。表示是从哪个页面进入到本页面to对象：路由将要跳转的路径信息，信息是包含在对像里边的。表示要进入的页面是哪个next()：路由的控制参数，常用的有next(true)和next(false)。一个开关，表示是否进行跳转到目标页面next()一定要写上，否则就是没开开关，禁止跳转了默认是next()：可以跳转，加参数就是：next(true)：可以跳转next(false)：不可以跳转b.写在模板中的钩子函数：有两个钩子函数可以使用beforeRouteEnter：在路由进入前的钩子函数beforeRouteLeave：在路由离开前的钩子函数可以监控到路由的进入和路由的离开，也可以轻易的读出to和from的值。beforeRouteEnter:(from,to,next)=>{ //do something}beforeRouteLeave:(from,to,next)=>{ //do something}13、编程式导航

不在html代码中使用router-link进行页面跳转，而是在js代码(业务逻辑)里面进行页面跳转                        methods:{                            goBack(){                                this.$router.go(-1);                            },                            goForward(){                                this.$router.go(1);                            },                            goHome(){                                this.$router.push("/")                            }                        }