vue--路由嵌套

時間 2019-12-04

原文原文鏈接

路由嵌套的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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。