【原創】一篇學會vue路由配置 、 動態路由 、多層路由（實例）

先來看看效果圖：

 

為了方便講解，我沒有使用vue腳手架，如果需要的，可以留言跟我要。不多說開工：

 

首先，html先組上

<div id="app">
    <div>
        <router-link to="/index">首頁</router-link>
        <router-link to="/news">新聞</router-link>
        <router-link to="/friend">朋友圈</router-link>
        <router-view></router-view>
    </div>

</div>

 

這個沒什么要說的把，不懂html我也沒招，router-link  頁面路徑 router-view vue展現視圖
接下來就是vuejs的代碼，我說下思路吧，針對新手思路：首先我們先寫一級的路由，先不考慮二級的。寫好了一層的再去考慮二層的，這是一層路由代碼，這是注釋都寫全了就不一行行解釋了。

//    注冊新聞列表模塊
    Vue.component('newstpl',{
        template:'<div><h2>新聞頁</h2></div>',
    });
//    注冊朋友圈列表模塊
    Vue.component('firendlist',{
        template:'<div><h1><center>朋友圈</center></h1></div>',
    })
//首頁內容
const indexhtml={
    template:"<div><h3>主頁內容</h3></div>"
}
//新聞頁面內容
const newhtml={
    template:'<newstpl></newstpl>'
}
//朋友圈頁面內容
const firendhtml={
    template:'<firendlist></firendlist>',
}
//聲明路由器
const routes=[
    {path:'/index',component:indexhtml,
    },
    {path:'/news',component:newhtml,
    },
    {path:'/friend',component:firendhtml},
]
//注冊路由
const router = new VueRouter({
    routes
})
//綁定
    new Vue({
        el:'#app',
        router,

    })

 

好了，一層實現完畢，啟動看看，好沒問題，咱們往下走，下面我講細一點吧 有點復雜。
咱們一共首頁、朋友圈和新聞三個模塊。一個個來


首頁，相對簡單。就是簡單的二層路由

const indexhtml={
    template:"<div><h3>主頁內容</h3><p><router-link to='/index/zhuce'>注冊</router-link> <router-link to='/index/login'>登錄</router-link></router-link></p><router-view></router-view></div>"
}
首先把indexhtml改成如上一般，增加注冊和登錄兩個模塊，既然增加了這倆模塊，那肯定也要有魔板對吧，
//注冊頁面
const zhuce={
    template:'<div>我是注冊頁面</div>'
}
//登錄頁面
const login={
    template:'<div>我是登錄頁面</div>'
}

 

模版有了，那么就是寫進路由了，路由怎么寫呢？
　　

 {path:'/index/login',component:login}, 
這么寫么？大家想一下，這么寫可以么
首先，這么寫相當於直接到了登錄頁面，卻不顯示index頁面了，
再者，這樣完全不利於代碼的可讀性，想象一下，另外的人去看你代碼，那么多路由，誰知道對應哪里呢？不利於工作需要，
下面上正確的代碼，

{path:'/index',component:indexhtml,
    children:[
    {path:'zhuce',component:zhuce},
    {path:'login',component:login},
]
}

 

來說說吧，多層路由增加一個childred數組，簡單吧，也可以繼續嵌套，多層嵌套即可
想直接copy代碼的可以看最后，可以分享所有代碼。

這樣簡單的實現了首頁的效果，再來說說新聞頁面把，首先我考慮的是假如是一個后台系統，用戶自定義的新聞路徑，那么肯定不能是寫死的地址，對吧，然后就是他的列表，肯定就要通過一個數組存儲（本文中所有都是本地數據，需要服務器數據的可以留言我），在這他列表點擊肯定要顯示他的新聞內容，這個內容肯定不能寫死地址，所以第一時間就想到了動態路由，也是本文的重點，下面開始吧（以下代碼使用了watch監聽，個人不推薦使用watch來制作頁面，特別耗費資源，本文這么做是因為要講解動態路由，但是不想全加載一個內容，並且當時寫的時候有人問了我watch相關的，所以用了，好了不多說，說道用的時候再說替換方法）
首先我們要注冊一個新聞列表的模塊

//    注冊新聞列表模塊
    Vue.component('newstpl',{
        template:'<div><h2>新聞頁</h2><ul><li v-for="i in list"><router-link :to=" \'/news/\' + i.path">{{i.name}}</router-link></li></ul><router-view></router-view></div>',
        data(){
            return {
                list:[
                    {name:'新聞一',path:'new1'},
                    {name:'新聞二',path:'new2'},
                    {name:'新聞三',path:'new3'}
                ],

            }
        }
    });

 

也需要注冊一個內容頁的模塊

//    注冊新聞內容模塊 實現內容針對性
Vue.component('contenttpl',{
    props: {
        data1: {
            default: 'new4'
        }
    },
    template:`<div><h1>{{yemian[0].title}}</h1><h2>{{yemian[0].content}}</h2></div>`,
    data(){
        return {
            yemian:[{}],
            newlist:[
                {title:'new1',content:'新聞一的內容'},
                {title:'new2',content:'新聞er的內容'},
                {title:'new3',content:'新聞san的內容'},
            ]
        }
    },
    watch:{
        data1(){
            this.myfunction()

        }
    },
    mounted(){
        this.myfunction()
    },
    methods:{
        myfunction(){


            this.yemian =  this.newlist.filter(item=>{
                return item.title==this.data1;

            })
        },
    },
});

 

這段比較長，說一下把，首先watch這個完全可以換成在列表加載出來之后去后台直接獲取完整地址，再用完整地址來更新view，
在這說說我為什么需要一個myfunction這個函數，首先這也是watch和路由配合的一個缺點，用watch監聽參數變化時候，怎么動態去更新內容呢，所以我增加了watch監聽，但是發現模版第一次加載時候不生效，這是因為我第一次點擊時候是傳參，所以在魔板生成時候就已經有了這個，即便增加默認值也是不行的，所以增加了一個方法，開始就觸發一遍，
filter是js語法，不懂得可以去查查，不多講
接下來就是配置這個路由，

{path:'/news',component:newhtml,
    children:[
    {path:'/news/:id',component:{
        template:'<contenttpl :data1="$route.params.id"></contenttpl>'
    }}
]
},

 

contenttpl這個上面注冊了，上面提到我考慮后台數據，不確定的情況，所以需要傳參更改內容（又是watch的鍋），如果用我提到的另外一種方法可以避免這么麻煩，感興趣的可以找我要。
$route.params.id 獲取動態路由的值

---

不懂得可以看看route第二章

https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html

大約在第二屏

---

接下來就是朋友圈這個，這個上面的gif就看出來了，把第二個看完，第三個就是留給你自己練習的，看完本文的朋友去練習把，下面分享本頁面的全部代碼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vueroter 學習</title>
</head>
<body>
<div id="app">
    <div>
        <router-link to="/index">首頁</router-link>
        <router-link to="/news">新聞</router-link>
        <router-link to="/friend">朋友圈</router-link>
        <router-view></router-view>
    </div>

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//    注冊新聞列表模塊
    Vue.component('newstpl',{
        template:'<div><h2>新聞頁</h2><ul><li v-for="i in list"><router-link :to=" \'/news/\' + i.path">{{i.name}}</router-link></li></ul><router-view></router-view></div>',
        data(){
            return {
                list:[
                    {name:'新聞一',path:'new1'},
                    {name:'新聞二',path:'new2'},
                    {name:'新聞三',path:'new3'}
                ],

            }
        }
    });
//    注冊新聞內容模塊 實現內容針對性
Vue.component('contenttpl',{
    props: {
        data1: {
            default: 'new4'
        }
    },
    template:`<div><h1>{{yemian[0].title}}</h1><h2>{{yemian[0].content}}</h2></div>`,
    data(){
        return {
            yemian:[{}],
            newlist:[
                {title:'new1',content:'新聞一的內容'},
                {title:'new2',content:'新聞er的內容'},
                {title:'new3',content:'新聞san的內容'},
            ]
        }
    },
    watch:{
        data1(){
            this.myfunction()

        }
    },
    mounted(){
        this.myfunction()
    },
    methods:{
        myfunction(){


            this.yemian =  this.newlist.filter(item=>{
                return item.title==this.data1;

            })
        },

    },


});
//    注冊朋友圈列表模塊
    Vue.component('firendlist',{
        template:'<div><h1><center>朋友圈</center></h1><ul><li v-for="t in firendlist">{{t.name}}</li></ul></div>',
        data(){
            return {
                    firendlist:[
                        {name:'1'},
                        {name:'2'},
                        {name:'3'},
                        {name:'4'},
                        {name:'5'},
                        {name:'6'},
                        {name:'7'},
                        {name:'8'},
                        {name:'9'},
                        {name:'10'},
                        {name:'11'},
                        {name:'12'},
                    ]
            }
        }
    })
//首頁內容
const indexhtml={
    template:"<div><h3>主頁內容</h3><p><router-link to='/index/zhuce'>注冊</router-link> <router-link to='/index/login'>登錄</router-link></router-link></p><router-view></router-view></div>"

}
//新聞頁面內容
const newhtml={
    template:'<newstpl></newstpl>'

}
//朋友圈頁面內容
const firendhtml={
    template:'<firendlist></firendlist>',


}
//注冊頁面
const zhuce={
    template:'<div>我是注冊頁面</div>'
}
//登錄頁面
const login={
    template:'<div>我是登錄頁面</div>'
}

//聲明路由器
const routes=[
    {path:'/index',component:indexhtml,
        children:[
        {path:'zhuce',component:zhuce},
        {path:'login',component:login},
    ]
    },
    {path:'/news',component:newhtml,
        children:[
        {path:'/news/:id',component:{
            template:'<contenttpl :data1="$route.params.id"></contenttpl>'
        }}
    ]
    },
    {path:'/friend',component:firendhtml},


]
//注冊路由
const router = new VueRouter({
    routes
})
//綁定
    new Vue({
        el:'#app',
        router,

    })
</script>
</body>
</html>

 

以上是本文全部代碼，不喜勿噴，本文分享結束。轉載需要注明原處