欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue路由嵌套的SPA实现步骤

程序员文章站 2022-04-09 21:35:08
本文为大家分享了路由嵌套的spa实现的步骤: a(/a)组件需要嵌套b组件(/b)和c组件(/c) ①准备嵌套其它组价的父组件 指定一个容器 在a组件指定一个容器...

本文为大家分享了路由嵌套的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是负数,向后退

代码

<!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>
 <div id="container">
    <p>{{msg}}</p>
    <router-view></router-view>
  </div>
  <script>
//登录组件
    var mylogin = vue.component("login",{
      template:`
        <div>
          <h1>登录组件</h1>
          <router-link to="/mail">登录</router-link>
        </div>
    `
    })
//  邮箱页面
    var mymail = vue.component("mail",{
//    定义一个返回的方法
      methods:{
        goback:function(){
          this.$router.go(-1);
        }
      },
      template:`
        <div>
          <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>
        </div>
    `
//  指定一个容器,加载收件箱或收件箱的列表
    })
//  收件箱组件
    var myinbox = vue.component("inbox-component",{
      template:`
        <div>
          <h4>收件箱</h4>
          <ul>
            <li>未读邮件1</li>
            <li>未读邮件2</li>
            <li>未读邮件3</li>
          </ul>
        </div>
    `
    })
//  发件箱组件
    var myoutbox = vue.component("outbox-component",{
      template:`
        <div>
          <h4>发件箱</h4>
          <ul>
            <li>已发送邮件1</li>
            <li>已发送邮件2</li>
            <li>已发送邮件3</li>
          </ul>
        </div>
    `
    })
    //配置路由词典
    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"
      }
    })
    //通过再次指定一个<router-view></router-view>和children:[]
  </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。