vue--路由嵌套

时间 2019-12-04 标签 vue 路由嵌套

路由嵌套的SPA实现的步骤：html

A（/a）组件须要嵌套B组件(/b)和C组件(/c)vue

①准备嵌套其它组价的父组件指定一个容器
在A组件指定一个容器
<router-view></router-ivew>vue-router

②在A组件的路由配置对象中指定children属性
{
path:'/a',
component:A,
children:[
{path:'/b',component:B},
{path:'/c',component:C},
]
}this

补充：
//数字若是超出记录的次数，是不行的。
this.$router.go(num);
若是num是正数，向前进
若是num是负数，向后退spa

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