이번에는 vueroutingnested SPA 구현 방법과, Vue Routing Nested SPA 구현 시 주의사항은 무엇인지 알아보겠습니다.
이 문서에서는 라우팅 중첩 SPA를 구현하는 단계를 공유합니다.
A(/a) 구성 요소는 B 구성 요소(/b)와 C 구성 요소(/c)를 중첩해야 합니다
① 다른 상위 구성 요소를 중첩 준비하고 컨테이너
지정
A 구성 요소
<router-view></router-ivew>
에서 컨테이너를 지정합니다. ② A 구성요소의 라우팅 구성 객체 에 children 속성
{ path:'/a', component:A, children:[ {path:'/b',component:B}, {path:'/c',component:C}, ] }
을 지정합니다:
//레코드 수를 초과하면 동작하지 않습니다.
this.$router.go(num);
num이 양수이면 앞으로 이동
num이 음수이면 뒤로 이동
코드
ffd43448117c1013fbeeed3f564491ad 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7路由嵌套6e916e0f7d1e588d4f442bf645aedb2f 1a5245d5109bbd1db7ee93a241be1c412cacc6d41bbb37262a98f745aa00fbf0 c5db84164be73946241e2787eab8f11f2cacc6d41bbb37262a98f745aa00fbf0 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 208ab46def49e0b0f034dde40adc5640 e388a4556c0f65e1904146cc1a846bee{{msg}}94b3e26ee717c64999d7867364b1b4a3 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e 94b3e26ee717c64999d7867364b1b4a3 3f1c4e4b6b16bbbd69b2ee476dc4f83a //登录组件 var myLogin = Vue.component("login",{ template:` e388a4556c0f65e1904146cc1a846bee 4a249f0d628e2318394fd9b75b4636b1登录组件473f0a7621bec819994bb5020d29372a 5439544d3fddc920749e378b8f06a678登录d625018d6d57dc2163f3a71531b24864 94b3e26ee717c64999d7867364b1b4a3 ` }) // 邮箱页面 var myMail = Vue.component("mail",{ // 定义一个返回的方法 methods:{ goBack:function(){ this.$router.go(-1); } }, template:` e388a4556c0f65e1904146cc1a846bee 4a249f0d628e2318394fd9b75b4636b1邮箱主页面473f0a7621bec819994bb5020d29372a ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6 7eda4a77e471d4ed7a59edb55bb9b4f7收件箱d625018d6d57dc2163f3a71531b24864 bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6 4d0d9812262c994b1a348e3daf3abaea发件箱d625018d6d57dc2163f3a71531b24864 bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 // 点击按钮返回前面的页面 4d003244892e99ff75c3a224665ef98d返回65281c5ac262bf6d81768915a4a77ac0 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e 94b3e26ee717c64999d7867364b1b4a3 ` // 指定一个容器,加载收件箱或收件箱的列表 }) // 收件箱组件 var myInBox = Vue.component("inbox-component",{ template:` e388a4556c0f65e1904146cc1a846bee 3f7b3decd2dcafb07b84d2d3985d9f40收件箱0f6dfd1e3624ce5465eb402e300e01ae ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6未读邮件1bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6未读邮件2bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6未读邮件3bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 94b3e26ee717c64999d7867364b1b4a3 ` }) // 发件箱组件 var myOutBox = Vue.component("outbox-component",{ template:` e388a4556c0f65e1904146cc1a846bee 3f7b3decd2dcafb07b84d2d3985d9f40发件箱0f6dfd1e3624ce5465eb402e300e01ae ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6已发送邮件1bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6已发送邮件2bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6已发送邮件3bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 94b3e26ee717c64999d7867364b1b4a3 ` }) //配置路由词典 new Vue({ router:new VueRouter({ routes:[ {path:'',redirect:'/login'}, {path:'/login',component:myLogin}, {path:'/mail',component:myMail,children:[ {path:'/inbox',component:myInBox}, {path:'/outbox',component:myOutBox} ]}, ] }), el:"#container", data:{ msg:"Hello VueJs" } }) //通过再次指定一个975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e和children:[] 2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 보세요!
위 내용은 Vue 라우팅 중첩 SPA 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!