vue-router 정적 경로

SPA(한 페이지 애플리케이션)
웹 페이지 응용 프로그램은 한 장뿐입니다.단일 페이지 응용 프로그램(SPA)은 단일 HTML 페이지를 로드하고 사용자가 응용 프로그램과 상호 작용할 때 동적으로 페이지를 업데이트하는 웹 응용 프로그램입니다.브라우저는 처음에 필요한 HTML, CSS, 자바스크립트를 불러옵니다. 모든 작업은 이 페이지에서 이루어지고 자바스크립트가 제어합니다.따라서 한 페이지 응용에 있어 모듈화된 개발과 디자인은 상당히 중요하다.
특징
속도: 더 좋은 사용자 체험으로 웹 앱에서native 앱의 속도와 유창함을 느낄 수 있고,
· MVVM: 고전적인 MVVM 개발 모델로 앞뒤가 각각 책임을 진다.
·ajax: 전방을 중시하고 업무 논리는 모두 로컬에서 조작하며 데이터는 AJAX를 통해 동기화하고 제출해야 한다.
· 라우팅: URL에서 # 기호를 현재 뷰의 주소로 사용하고 # 기호 뒤의 매개변수를 변경하면 페이지가 다시 로드되지 않습니다.
단일 페이지 응용 프로그램에서 보기의 전환은 루트를 통해 이루어져야 한다.
라우팅의 특징
URL에서 # 기호를 현재 뷰의 주소로 사용하고 # 기호 뒤의 매개변수를 변경하면 페이지가 다시 로드되지 않습니다.
상품 정보를 얻는 경우:http://www.baidu.com/#/getGoods
사용자 정보를 보려면 다음과 같이 하십시오.http://www.baidu.com/#/getUser
프런트엔드 라우팅은 # 이후에 변경된 내용에 따라 다른 내용을 요청하지만, # 이후에 변경된 페이지 주소는 변경되지 않으므로 실제로 액세스할 수 있습니다.
루트에서 path가 구성 요소와 일일이 대응하는 것을 주의하십시오
라우팅 작성 프로세스
1. 라우팅 플러그인 도입

2.구성 요소의 모든 루트에 대응하는 구성 요소 정의

모조미단 밑부분 내비게이션, 구성 요소 만들기: 첫 페이지, 발견, 근처, 주문서, 나의


    const Index = {
		            template: `
		            <div>首页</div>
		        `
		        }
	 const Find = {
		            template: `
		            <div>发现</div>
		        `
		        }
	 const Nearby = {
		            template: `
		            <div>附近</div>
		        `
		        }
	const Order = {
		            template: `
		            <div>订单</div>
		        `
		        }
	const My = {
		            template: `
		            <div>我的</div>
		        `
		        }			
 
  
3.定义路由表, 一个路径对应一个组件 
  var routes =[
	{
	    path:"/",
		component:Index
	},
	{
		path:"/find",
		component:Find
	},
	{
		path:"/nearby",
		component:Nearby
	},
	{
		path:"/order",
		component:Order
	},
	{
		path:"/my",
		component:My
	}
]
  
4.라우팅 객체 만들기
var router = new VueRouter({
		            routes:routes,    //   
		            linkExactActiveClass: 'active'
		        })
  
5.new Vue에 router 넣기
var vm=new Vue({
		    el:"#app",
		    router
		})
  
6.템플릿

router-link는 자동으로 a 탭으로 전환되며, 대응하는 내용은router-view


      
      
      
      
      
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



                
                    
        
    
    
    
    
    
                
                

                

                
                
                
                    
                        

                            
                            

                                
                                    

                                    이 내용에 흥미가 있습니까?
                                

                            
                            
                            
                            현재 기사가 여러분의 문제를 해결하지 못하는 경우  AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
                            
                                
                                Fastapi websocket 및 vue 3(Composition API)
                            
                            1부: FastAPI
virtualenv 만들기(선택 사항)
FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오.
생성main.py 파일
및 실행 -
브라우저에서 이 링크 열기http://127.0.0.1:...
                            
                            
                            

                            
                            텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
                            
                            CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue-router 정적 경로

좋은 웹페이지 즐겨찾기