Vue 라우팅 중첩 SPA 구현 방법-JS 튜토리얼-php.cn

Vue 라우팅 중첩 SPA 구현 방법

php中世界最好的语言

풀어 주다： 2018-05-18 10:44:21

원래의

1452명이 탐색했습니다.

이번에는 vueroutingnested SPA 구현 방법과, Vue Routing Nested SPA 구현 시 주의사항은 무엇인지 알아보겠습니다.

이 문서에서는 라우팅 중첩 SPA를 구현하는 단계를 공유합니다.

A(/a) 구성 요소는 B 구성 요소(/b)와 C 구성 요소(/c)를 중첩해야 합니다

① 다른 상위 구성 요소를 중첩 준비하고 컨테이너

지정 A 구성 요소

<router-view></router-ivew>

로그인 후 복사

에서 컨테이너를 지정합니다. ② A 구성요소의 라우팅 구성 객체 에 children 속성

{ 
path:&#39;/a&#39;,
component:A,
children:[
{path:&#39;/b&#39;,component:B},
{path:&#39;/c&#39;,component:C},
]
}

로그인 후 복사

을 지정합니다:

//레코드 수를 초과하면 동작하지 않습니다.
this.$router.go(num);
num이 양수이면 앞으로 이동
num이 음수이면 뒤로 이동

코드

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>路由嵌套</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <router-view></router-view>
  </p>
  <script>
//登录组件
    var myLogin = Vue.component("login",{
      template:`
        <p>
          <h1>登录组件</h1>
          <router-link to="/mail">登录</router-link>
        </p>
    `
    })
//  邮箱页面
    var myMail = Vue.component("mail",{
//    定义一个返回的方法
      methods:{
        goBack:function(){
          this.$router.go(-1);
        }
      },
      template:`
        <p>
          <h1>邮箱主页面</h1>
          <ul>
            <li>
              <router-link to="/inbox">收件箱</router-link>
            </li>
            <li>
              <router-link to="/outbox">发件箱</router-link>
            </li>
          </ul>
//        点击按钮返回前面的页面
          <button @click="goBack">返回</button>
          <router-view></router-view>
        </p>
    `
//  指定一个容器,加载收件箱或收件箱的列表
    })
//  收件箱组件
    var myInBox = Vue.component("inbox-component",{
      template:`
        <p>
          <h4>收件箱</h4>
          <ul>
            <li>未读邮件1</li>
            <li>未读邮件2</li>
            <li>未读邮件3</li>
          </ul>
        </p>
    `
    })
//  发件箱组件
    var myOutBox = Vue.component("outbox-component",{
      template:`
        <p>
          <h4>发件箱</h4>
          <ul>
            <li>已发送邮件1</li>
            <li>已发送邮件2</li>
            <li>已发送邮件3</li>
          </ul>
        </p>
    `
    })
    //配置路由词典
    new Vue({
      router:new VueRouter({
        routes:[
          {path:&#39;&#39;,redirect:&#39;/login&#39;},
          {path:&#39;/login&#39;,component:myLogin},
          {path:&#39;/mail&#39;,component:myMail,children:[
            {path:&#39;/inbox&#39;,component:myInBox},
            {path:&#39;/outbox&#39;,component:myOutBox}
        ]},
        ]
      }),
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
    //通过再次指定一个<router-view></router-view>和children:[]
  </script>
 </body>
</html>

로그인 후 복사

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 보세요!

위 내용은 Vue 라우팅 중첩 SPA 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!