【原创】一篇学会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>

以上是本文全部代码，不喜勿喷，本文分享结束。转载需要注明原处