Implementation method of vue routing nested SPA-JS Tutorial-php.cn

Implementation method of vue routing nested SPA

php中世界最好的语言

Release： 2018-05-18 10:44:21

Original

1421 people have browsed it

This time I will bring you the implementation method of vueroutingnested SPA. What are the notes of vue routing nested SPA implementation? The following is a practical case. Let’s take a look.

This article shares with you the steps to implement routing nested SPA:

A (/a) component needs to nest B component (/b) and C component (/c)

① Prepare to nest the parent components of other groups and specify a container

Specify a container in component A

<router-view></router-ivew>

Copy after login

②Specify the children

attribute

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

Copy after login

in the routing configuration

object

of A component.Additional information:

//If the number exceeds the number of records, it will not work.

this.$router.go(num);If num is a positive number, go forward
If num is a negative number, go backward

Code

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

The above is the detailed content of Implementation method of vue routing nested SPA. For more information, please follow other related articles on the PHP Chinese website!