一、SPA的概述

SPA（single page application）单页面应用程序，在一个完成的应用或者站点中，只有一个完整的html页面，这个页面有一个容器，可以把需要加载的代码片段插入到该容器中。

SPA的工作原理：

  eg:  http://127.0.0.1/index.html#/start

①根据地址栏中url解析完整的页面：index.html
  加载index.html

②根据地址栏中url解析#后的路由地址： start
  根据路由地址，去在当前应用的配置中 找该路由地址的配置对象去查找该路由地址 所对应的模板的页面地址
  发起异步请求加载该页面地址

③把请求来的数据加载到指定的容器中

二、通过VueRouter来实现一个SPA的基本步骤

①引入对应的vue-router.js(该文件我已经上传到我的文件中)
②指定一个盛放代码片段的容器

③创建业务所需要的各个组件
④配置路由词典
每一个路由地址的配置对象（要加载哪个页面...）

const myRoutes = [
  {path:"/myLogin",component:TestLogin},
  {path:"/myRegister",component:TestRegister}
  ]
  const myRouter = new VueRouter({
  routes:myRoutes 
  })
  new Vue({
    router:myRouter 
  })

⑤测试
在地址栏中 输入对应的不同的路由地址 确认是否能够加载对应的

 
 
 
  <script src="js/vue.js"></script>

  <script src="js/vue-router.js"></script>
 
 
 
    
{{msg}}

    
  
  <script>
    var testLogin = Vue.component("login",{
      template:`
        
          
这是我的登录页面
        
      `
    })
    var testRegister = Vue.component("register",{
      template:`
        
          
这是我的注册页面
        
      `
    })
    //配置路由词典
    //对象数组
    const  myRoutes =[
    //当路由地址：地址栏中的那个路径是myLogin访问组件
    //组件是作为标签来用的所以不能直接在component后面使用
    //要用返回值 
      //path:""指定地址栏为空：默认为Login页面
        {path:"",component:testLogin},

      {path:"/myLogin",component:testLogin},
      {path:"/myRegister",component:testRegister}
    ]

    const myRouter = new VueRouter({
      //myRoutes可以直接用上面的数组替换
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      //或者：
      /*
        router:new VueRouter({
            routes:[
              {path:"/myLogin",component:testLogin},
      {path:"/myRegister",component:testRegister}
            ]
        })
      */
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 

 
 
 
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
 
 
 
    
{{msg}}
    
  
  <script>
  /*
    需要大家创建一个SPA，这个SPA有3个组件，分别对应的是collect/detail/order
    功能需求：
    在地址栏中路由地址是:
    /myColllect --> 收藏页组件
    /myDetail --> 详情页组件
    /myOrder --> 订单页组件
  */
  /*
    1、引入js文件
    2、创建三个组件,需要返回值
    3、路由词典配置(三小步)const myRoutes、const myRouter、router:myRouter,
    4、指定一个盛放代码片段的容器
          
  */
    var testCollect = Vue.component("collect",{
      template:`
        
          
这是收藏页
        
      `
    })
    var testDetail = Vue.component("detail",{
      template:`
        
          
这是详情页
        
      `
    })
    var testOrder = Vue.component("order",{
      template:`
        
          
这是订单页
        
      `
    })
    const myRoutes = [
        {path:"",component:testCollect},
        {path:"/myColllect",component:testCollect},
        {path:"/myDetail",component:testDetail},
        {path:"/myOrder",component:testOrder},
    ]
    const myRouter = new VueRouter({
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 

vue单页面优缺点_vue中SPA单页面应用程序详解

http://m.bbyears.com/jiaocheng/141526.html

推荐访问:vue单页面和多页面