vue2路由

我們在前面的學習過程中不管是在學習angular還是vue1，都會遇到二級路由，我們現在先來看一下vue2中的一級路由。

首先要引入的是vue2與路由文件。

 js代碼：

<script>
        window.onload=function () {
            var Home={
                template:"<h3>我是首頁</h3>"
            };
            var News={
                template:"<h3>我是新聞頁面</h3>"
            };
            //配置路由：
            var aaa=[
                {path:"/home",component:Home},
                {path:"/news",component:News},
                {path:"*",redirect:"/home"}
            ];
            //生成路由實例：
            var router=new VueRouter({
                routes:aaa
            });
            //掛載到某個元素上：
            new Vue({
                router,//簡寫
                el:"#div"
            })
        }
    </script>

　html代碼：

<div id="div">
      <div>
          <router-link to="/home">首頁</router-link>
          <router-link to="/news">新聞</router-link>
      </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

　　看到這裡你們會不會感到不管是vue1還是vue2的路由都要比angular複雜一點，但是要比angular路由容易理解。

下麵我們來看一下vue2中的二級路由：

js代碼：

<script>
        window.onload=function () {
            var Home={
                template:"<h3>我是首頁</h3>"
            };
            var News={
                template:`
                <div>
                    <h3>我是用戶信息</h3>
                        <ul>
                            <li><router-link to="/user/blue/age/13">blue</router-link></li>
                            <li><router-link to="/user/red/age/14">red</router-link></li>
                            <li><router-link to="/user/green/age/15">green</router-link></li>
                            <li><router-link to="/user/yellow/age/16">yellow</router-link></li>
                        </ul>
                        <div><router-view></router-view></div>
                    </div>
                `
            };
            var UserDefault={
                template:`<h4>{{$route.params}}</h4>`
            };
            //配置路由：
            var aaa=[
                {path:"/home",component:Home},
                {
                    path:"/news",
                    component:News,
                    children:[
                        {path:"/user/:username/age/:age",component:UserDefault}
                    ]
                },
                {path:"*",redirect:"/home"}
            ];
            //生成路由實例：
            var router=new VueRouter({
                routes:aaa
            });
            //掛載到某個元素上：
            new Vue({
                router,//簡寫
                el:"#div"
            })
        }
    </script>

　　html代碼：

<div id="div">
      <div>
          <router-link to="/home">首頁</router-link>
          <router-link to="/news">用戶</router-link>
      </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

　　以上就是vue2中的2級路由！