SPA应用

SPA应用：

①单页面应用

②vs多页面应用

1.页面个数     单页面：多个.html文件

                     多页面：只有一个完整的.html文件,其余"页面"，其实都是HTML模板片段

2.页面跳转     多页面：删除整颗DOM树，重新下载新的.html文件，重建新的DOM树

                     单页面：重新加载一个HTML模板片段局部替换指定元素位置即可

3.组件重用     多页面：即使有可重用的组件，每个页面必须重新请求一次

                      单页面：只加载一次，可多个组件，反复公用

4.页面切换动画  多页面：不可能实现

                         单页面：轻松实现

 

Vue-router插件：

1.创建一个唯一完整的.html页面

①引入vue.js和vue-router.js

②创建根元素

<div #app>

    ...

          <router-view></router-view>

2.定义各个组件的HTML模板

 <template id="子">

         ...  

也可以包含<router-view></router-view>

3.封装组件对象:

①js中:var 子={

         template:

         data(){

             return { }

         },

         methods:{ }

          ...

   }

4.定义路由词典:

var routes=[

    {path:"相对路径"，component:子组件对象}

]

5.创建路由词典封装路由词典

var router=new VueRouter({ routes })

6.定义根组件实例,加载路由器

new Vue({ 

    //el:"#app"

      router

}).$mount("#app")

测试：http://域名#/相对路径

 

路由地址间跳转:

HTML中   <router-link  :to="/main/start">跳转</router-link>

JS中         this.$router.push("/main/start");

                this.$router.go(-2)；

 

嵌套路由：var  routes=[ 

               {path:"/login",component:Login},

               {path:"/main",compoent:Main,children:[

                     {path:"/main/start",component:Start},

                     {path:"/main/plist",compoent:ProductList},

            ]},

 ]

Main:{  template:'... <router-view/>' }

 

路由参数：

1.路由词典中:   { path:"相对路径/:参数名",compoent:xxx,props:true}

2.在页面组件中添加同名自定义属性:  props:["参数名"]

3.跳转时: /相对路径/参数值

4.结果:参数值会自动传给props中的参数名属性,在页面组件中，可用this.参数名方式，访问！