首页 > 代码库 > vue2路由

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级路由!

 

vue2路由