首页 > 代码库 > 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路由
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。