Exemples d'applications SPA d'une seule page dans Vue

Cet article présente principalement en détail les informations pertinentes sur l'application SPA d'une seule page dans Vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

1. Présentation de SPA

SPA (application monopage) application d'une seule page, dans une application ou un site complété, il n'y a qu'une seule page HTML complète. , cette page a un conteneur et les extraits de code qui doivent être chargés peuvent être insérés dans le conteneur.

Comment fonctionne le SPA :

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

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

②Analyser l'adresse de routage après # selon l'url dans la barre d'adresse : start
Selon l'adresse de la route, rendez-vous dans l'objet de configuration de l'adresse de routage dans la configuration actuelle de l'application 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

③Placez la requête Chargez les données entrantes dans le conteneur spécifié

2. Étapes de base pour implémenter un SPA via VueRouter

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

<router-view></router-view>

③Créez ce dont l'entreprise a besoin Chaque composant de
④ Dictionnaire de routage de configuration
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
Saisissez 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:&#39;&#39;指定地址栏为空：默认为Login页面
　　　　　　　　{path:&#39;&#39;,component:testLogin},

      {path:&#39;/myLogin&#39;,component:testLogin},
      {path:&#39;/myRegister&#39;,component:testRegister}
    ]

    const myRouter = new VueRouter({
      //myRoutes可以直接用上面的数组替换
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      //或者：
      /*
        router:new VueRouter({
            routes:[
              {path:&#39;/myLogin&#39;,component:testLogin},
      {path:&#39;/myRegister&#39;,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>
 

Recommandations associées :

Une compréhension simple de la façon de définir le titre de la page Web pour une seule page dans vue2

À propos de la façon de faire fonctionner Vue.js Exemple d'analyse de zones de routage multiples sur une seule page

Principe de commutation d'écran coulissant gestuel sur une seule page H5

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!