Explication détaillée de l'application SPA d'une seule page en vue

Cette fois, je vais vous apporter une explication détaillée de l'application SPA monopage dans Vue. Quelles sont les précautions lors de l'utilisation de l'application SPA monopage dans Vue. cas pratique. Jetons un coup d'oeil.

1. Aperçu du SPA

SPA (application monopage) est une application monopage. Dans une application ou un site terminé, il n'y a qu'une seule page HTML complète. Cette page comporte un conteneur dans lequel les extraits de code qui doivent être chargés peuvent être insérés.

Comment fonctionne le SPA :

ˆex : http://127.0.0.1/index.html#/start

① Analysez la page complète en fonction de l'url dans la barre d'adresse : index.html
  Chargez index.html

②Selon l'adresse de routage après #analyse de l'url dans la barre d'adresse : démarrer
  En fonction de l'adresse de routage, retrouver la configuration objet de l'adresse de routage dans la configuration du application actuelle pour trouver l'adresse de la page du modèle correspondant à l'adresse de routage
  Lancer une requête asynchrone pour charger l'adresse de la page

③Chargez les données demandées dans le conteneur spécifié

2. Étapes de base pour mettre en œuvre un SPA via VueRouter

①Introduisez le vue-router.js correspondant (j'ai téléchargé ce fichier dans mon fichier)
②Spécifiez un conteneur pour contenir les extraits de code

<router-view></router-view>

③Créer différents composants nécessaires à l'entreprise
④Configurer le dictionnaire de routage
Objet de configuration de chaque adresse de routage (quelle page charger...)

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

⑤Test
Entrez les différentes adresses de routage correspondantes dans la barre d'adresse pour confirmer si le

 
 
 
  

  
 
 
 

    
{{msg}}

    <router-view></router-view>
  

  <script>
    var testLogin = Vue.component("login",{
      template:`
        <p>
          <h1>这是我的登录页面</h1>
        </p>
      `
    })
    var testRegister = Vue.component("register",{
      template:`
        <p>
          <h1>这是我的注册页面</h1>
        </p>
      `
    })
    //配置路由词典
    //对象数组
    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>
 

 
 
 
  
  
 
 
 

    
{{msg}}
    <router-view></router-view>
  

  <script>
  /*
    需要大家创建一个SPA，这个SPA有3个组件，分别对应的是collect/detail/order
    功能需求：
    在地址栏中路由地址是:
    /myColllect --> 收藏页组件
    /myDetail --> 详情页组件
    /myOrder --> 订单页组件
  */
  /*
    1、引入js文件
    2、创建三个组件,需要返回值
    3、路由词典配置(三小步)const myRoutes、const myRouter、router:myRouter,
    4、指定一个盛放代码片段的容器
          &lt;router-view&gt;&lt;/router-view&gt;
  */
    var testCollect = Vue.component("collect",{
      template:`
        <p>
          <h1>这是收藏页</h1>
        </p>
      `
    })
    var testDetail = Vue.component("detail",{
      template:`
        <p>
          <h1>这是详情页</h1>
        </p>
      `
    })
    var testOrder = Vue.component("order",{
      template:`
        <p>
          <h1>这是订单页</h1>
        </p>
      `
    })
    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>
 

Je pense que vous maîtrisez la méthode après avoir lu le cas dans ce article , pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

mint-ui loadmore Comment gérer les conflits entre le chargement pull-up et l'actualisation déroulante

Que diriez-vous de l'applet WeChat Activer le téléchargement des images sur le serveur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!