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路由的更多相关文章
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- vue2路由之指定滑动位置scrollBehavior
看源码的时候看到这个属性: 新手自然不知道这个是什么东西了,查了下vue API: https://router.vuejs.org/en/advanced/scroll-behavior.html ...
- 记一次vue2路由参数传递this指针问题
需要船体一个data()内的对象到另一个页面. <player-card v-for="(note, key) in sortedtNodes" :imgurl=" ...
- vue2 路由,运动
- vue2路由之指定滑动位置scrollBehavior-(载转)
看源码的时候看到这个属性: 新手自然不知道这个是什么东西了,查了下vue API: https://router.vuejs.org/en/advanced/scroll-behavior.html ...
- vue2借助animate.css实现路由动画效果
第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...
- 想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!
从Vue3发布以来,我就一直对其非常感兴趣,就一直想着将其投入公司的生产中,但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试:慢慢的发现组合式Api的形式非常适合开发(个人感觉),尤其是V ...
- router基本使用
摘自:https://blog.csdn.net/qq_39894133/article/details/78992923 1.vue2 路由的使用流程: 1.vue2中的路由定义层:<rout ...
- Vue2.X的路由管理记录之 钩子函数(切割流水线)
$route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...
随机推荐
- python作业03-文件操作&函数
一.文件处理相关 1.编码问题 (1)请说明python2 与python3中的默认编码是什么?答:Python2默认的字符编码是ASCII,默认的文件编码也是ASCII :python3默认的字符编 ...
- 笔记:MyBatis Mapper XML文件详解 - 映射和参数
MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行对比,你会立即发现省掉了将近 95% ...
- es6学习笔记--promise对象
Promise对象是为了简化异步编程.解决回调地狱情况 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可 ...
- spring集成redis
redis是一种非关系型数据库,与mongoDB不同的是redis是内存数据库,所以访问速度很快.常用作缓存和发布-订阅式的消息队列.redis官方没有提供windows版本的软件.windows版本 ...
- 上传到 App Store 时出错。
Try this, it fixed it for me. Open Terminal and run: cd ~ mv .itmstransporter/ .old_itmstransporte ...
- Java 小记 — RabbitMQ 的实践与思考
前言 本篇随笔将汇总一些我对消息队列 RabbitMQ 的认识,顺便谈谈其在高并发和秒杀系统中的具体应用. 1. 预备示例 想了下,还是先抛出一个简单示例,随后再根据其具体应用场景进行扩展,我觉得这样 ...
- Hook 无侵入式埋点(页面统计)
一.技术原理 Method-Swizzling 黑魔法 方法交换(不懂的可以查) 二.页面统计 某盟页面统计SDK需要开发者在APP基类里实现ViewDidAppear和viewDidDisappea ...
- [活动] 【奖品撩人】部落守卫者集结令·这一回同程SRC的安全由“我”守卫!
i春秋SRC部落联合同程SRC发布首届部落守卫者漏洞提交任务(代号G001)! 你准备好了吗! [部落守卫者集结令]拿巨额奖金?上白帽子排行榜?近距离膜拜大佬?学技术?掌握窍门?又或者你是个责任感爆棚 ...
- Mysql的内连接,外链接,交叉链接
内连接:只连接匹配的行 inner join select A.*,B.* from A,B where A.id = B.parent_id 外链接包括左外链接,右外链接,全外链接 左外链接:包含 ...
- C语言第一次博客作业—输入输出
一.PTA实验作业 题目1:7-3 温度转换 本题要求编写程序,计算华氏温度150°F对应的摄氏温度.计算公式:C=5×(F−32)/9,式中:C表示摄氏温度,F表示华氏温度,输出数据要求为整型. 1 ...