Detailed example of SPA single page application in vue-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed example of SPA single page application in vue

小云云

Dec 26, 2017 pm 01:32 PM

app Detailed explanation page

This article mainly introduces the relevant information of SPA single-page application in vue in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Overview of SPA

SPA (single page application), in a completed application or site, there is only one complete html page. This page has a container into which the code snippets that need to be loaded can be inserted.

How SPA works:

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

① Parse the complete page according to the url in the address bar: index.html
Load index.html

② Parse the route address # after parsing the url in the address bar: start
According to the route Address, go to the configuration object of the routing address in the current application configuration to find the page address of the template corresponding to the routing address
Initiate an asynchronous request to load the page address

③Put the request Load the incoming data into the specified container

2. Basic steps to implement a SPA through VueRouter

①Introduce the corresponding vue-router.js (I have uploaded this file to my files)
②Specify a container to hold the code snippets

<router-view></router-view>

Copy after login

③Create each item needed for the business Component
④Configuration routing dictionary
Configuration object of each routing address (which page to load...)

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

Copy after login

⑤Test
Enter the corresponding different routing addresses in the address bar to confirm whether the corresponding


 
 
 
  

  
 
 
 
    
{{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>

Copy after login



 
 
 SPA练习
  
  
 
 
 
    
{{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>

Copy after login

Related recommendations:

Briefly understand how to set the web title for a single page in vue2

## Analysis of the principle of gesture sliding screen switching of HTML5 single page

php simple page caching implementation code

The above is the detailed content of Detailed example of SPA single page application in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1653

CakePHP Tutorial

1413

Laravel Tutorial

1305

PHP Tutorial

1251

C# Tutorial

1224

Related knowledge

Unable to save changes to Photos app error in Windows 11 Mar 04, 2024 am 09:34 AM

If you encounter the Unable to save changes error while using the Photos app for image editing in Windows 11, this article will provide you with solutions. Unable to save changes. An error occurred while saving. Please try again later. This problem usually occurs due to incorrect permission settings, file corruption, or system failure. So, we’ve done some deep research and compiled some of the most effective troubleshooting steps to help you resolve this issue and ensure you can continue to use the Microsoft Photos app seamlessly on your Windows 11 device. Fix Unable to Save Changes to Photos App Error in Windows 11 Many users have been talking about Microsoft Photos app error on different forums

Photos cannot open this file because the format is not supported or the file is corrupted Feb 22, 2024 am 09:49 AM

In Windows, the Photos app is a convenient way to view and manage photos and videos. Through this application, users can easily access their multimedia files without installing additional software. However, sometimes users may encounter some problems, such as encountering a "This file cannot be opened because the format is not supported" error message when using the Photos app, or file corruption when trying to open photos or videos. This situation can be confusing and inconvenient for users, requiring some investigation and fixes to resolve the issues. Users see the following error when they try to open photos or videos on the Photos app. Sorry, Photos cannot open this file because the format is not currently supported, or the file

How to connect Apple Vision Pro to PC Apr 08, 2024 pm 09:01 PM

The Apple Vision Pro headset is not natively compatible with computers, so you must configure it to connect to a Windows computer. Since its launch, Apple Vision Pro has been a hit, and with its cutting-edge features and extensive operability, it's easy to see why. Although you can make some adjustments to it to suit your PC, and its functionality depends heavily on AppleOS, so its functionality will be limited. How do I connect AppleVisionPro to my computer? 1. Verify system requirements You need the latest version of Windows 11 (Custom PCs and Surface devices are not supported) Support 64-bit 2GHZ or faster fast processor High-performance GPU, most

How to copy a page in Word Feb 20, 2024 am 10:09 AM

Want to copy a page in Microsoft Word and keep the formatting intact? This is a smart idea because duplicating pages in Word can be a useful time-saving technique when you want to create multiple copies of a specific document layout or format. This guide will walk you through the step-by-step process of copying pages in Word, whether you are creating a template or copying a specific page in a document. These simple instructions are designed to help you easily recreate your page without having to start from scratch. Why copy pages in Microsoft Word? There are several reasons why copying pages in Word is very beneficial: When you have a document with a specific layout or format that you want to copy. Unlike recreating the entire page from scratch

MS Paint not working properly in Windows 11 Mar 09, 2024 am 09:52 AM

Microsoft Paint not working in Windows 11/10? Well, this seems to be a common problem and we have some great solutions to fix it. Users have been complaining that when trying to use MSPaint, it doesn't work or open. Scrollbars in the app don't work, paste icons don't show up, crashes, etc. Luckily, we've collected some of the most effective troubleshooting methods to help you resolve issues with Microsoft Paint app. Why doesn't Microsoft Paint work? Some possible reasons why MSPaint is not working on Windows 11/10 PC are as follows: The security identifier is corrupted. hung system

Shazam app not working in iPhone: Fix Jun 08, 2024 pm 12:36 PM

Having issues with the Shazam app on iPhone? Shazam helps you find songs by listening to them. However, if Shazam isn't working properly or doesn't recognize the song, you'll have to troubleshoot it manually. Repairing the Shazam app won't take long. So, without wasting any more time, follow the steps below to resolve issues with Shazam app. Fix 1 – Disable Bold Text Feature Bold text on iPhone may be the reason why Shazam is not working properly. Step 1 – You can only do this from your iPhone settings. So, open it. Step 2 – Next, open the “Display & Brightness” settings there. Step 3 – If you find that “Bold Text” is enabled

Move photos from old Photos to the new Photos app in Windows 11 Mar 10, 2024 am 09:37 AM

This article will guide you on how to migrate photos from Photos Legacy to the new Photos app in Windows 11. Microsoft has introduced a revamped Photos app in Windows 11, giving users a simpler and more feature-rich experience. The new Photos app sorts photos differently than the past PhotosLegacy app. It organizes photos into folders like other Windows files instead of creating albums. However, users still using the Photos Legacy app can easily migrate their photos to the new version of Microsoft Photos. What is Phot

Why does 0xc0000142 error code appear? Feb 25, 2024 am 11:15 AM

0xc0000142 refers to the error code in Windows systems, and it is usually related to the problem of a program or application not starting or running properly. When a user tries to open a program, the system displays the error message "0xc0000142" and the program cannot continue to run. So, why does the 0xc0000142 error occur? There are many reasons for this error code, here are some common causes and solutions. Corrupted configuration files: The configuration files of some programs may be corrupted, causing

See all articles