vue2路由

Posted 2020-09-29 Hero^

我们在前面的学习过程中不管是在学习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级路由！