이번에는 vue의 SPA 단일 페이지 애플리케이션에 대해 자세히 설명하겠습니다. vue에서 SPA 단일 페이지 애플리케이션을 사용할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
1. SPA
개요 SPA(단일 페이지 애플리케이션)는 완성된 애플리케이션이나 사이트에는 로드해야 하는 코드 조각을 삽입할 수 있는 컨테이너가 하나만 있습니다.
SPA 작동 방식:
예: http://127.0.0.1/index.html#/start
①주소 표시줄의 URL에 따라 전체 페이지를 구문 분석합니다. index.html
Load index.html
②# 주소 표시줄의 URL을 구문 분석한 후 라우팅 주소에 따라: start
라우팅 주소에 따라 현재 애플리케이션의 구성에서 라우팅 주소의 구성 객체 를 찾아 템플릿의 페이지 주소를 찾습니다. 라우팅 주소에 해당하는
페이지 주소 로드를 위한 비동기 요청 시작
③요청한 데이터를 지정된 컨테이너에 로드
2. VueRouter
를 통해 SPA를 구현하는 기본 단계
①해당 vue-router.js를 소개합니다(이 파일을 내 파일에 업로드했습니다)
②코드 조각을 담을 컨테이너 지정
<router-view></router-view>
③비즈니스에 필요한 다양한 컴포넌트 생성
4라우팅 사전 구성
라우팅 주소별 구성 객체(어떤 페이지를 로드할지...)
const myRoutes = [ {path:'/myLogin',component:TestLogin}, {path:'/myRegister',component:TestRegister} ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter })
⑤테스트
해당하는 다른 라우팅 주소를 주소 표시줄에 입력하여 해당
{{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>
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、指定一个盛放代码片段的容器 <router-view></router-view> */ 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>
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 주의하세요. PHP 중국어 웹사이트 기사에 다른 관련 주제가 있습니다!
추천 자료:
mint-ui loadmore 풀업 로딩과 풀다운 새로 고침 간의 충돌을 처리하는 방법
위 내용은 vue의 SPA 단일 페이지 애플리케이션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!