vue2.0路由变化1
路由的步骤
1.定义组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
};
2.配置路由
const routes=[
{path:'/home', componet:Home},
{path:'/news', componet:News},
];
3.生成路由实例
const router=new VueRouter({
routes
});
（代码量不大时二三步可以合并）
4.挂到vue上
new Vue({
router,
el:'#box'
});
vue2.0的改变
1.嵌套使用方式的改变
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username',//path路径不要再以"/"开头，不然会认为从根路径开始
component:UserDetail}
]
},
];
- 跳转方式
废弃了a便签，引入了router-link
<router-link to="/user/hhh/age/10">hhh</router-link></li>
router-view还是不变
3. 获取数据
<li><router-link to="/user/hhh/age/10">hhh</router-link></li>
...
var UserDetail={
template:'<div>{{$route.params}}</div>'
};
...
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[{
path:':username/age/:age',
component:UserDetail
}]
},
{path:'*', redirect:'/home'}
];
- 路由实例方法:
router.push({path:'home'});
直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:'news'})
替换路由，不会往历史记录里面添加
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<div id="box">
<div>
<input type="button" value="添加一个路由" @click="push">
<input type="button" value="替换一个路由" @click="replace">
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template:'<h3>我是主页</h3>'
};
var News = {
template:'<h3>我是用户</h3>'
};
var User = {
template:`
<div>
<h3>我是用户信息</h3>
<div>
<li><router-link to="/user/hhh/age/10">hhh</router-link></li>
<li><router-link to="/user/ggg/age/20">ggg</router-link></li>
<li><router-link to="/user/ttt/age/30">ttt</router-link></li>
</div>
<div>
<router-view></router-view>
</div>
</div>
`
};
var UserDetail={
template:'<div>{{$route.params}}</div>'
};
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[{
path:':username/age/:age',
component:UserDetail
}]
},
{path:'*', redirect:'/home'}
];
//生成路由实例
const router=new VueRouter({
routes
});
new Vue({
router,
methods:{
push:function() {
router.push({path:'/home'});
},
replace:function(){
router.replace({path:'user'});
}
}
}).$mount('#box')
</script>
</body>
</html>
vue2.0路由变化1的更多相关文章
- vue2.0路由
现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...
- vue2.0路由写法、传参和嵌套
前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...
- vue2.0路由进阶
一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...
- vue2.0路由-路由嵌套
vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- vue2.0 路由学习笔记
昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...
- Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- 解决vue2.0路由 TypeError: Cannot read property 'matched' of undefined 的错误问题
刚开始使用vue-router2.0,虽然也用了vux,用起来却发现一个问题--具体如下: 正常情况下使用脚手架跑完之后,然后修改源项目,首先在main.js入口里把该import进去的vuex,vu ...
- vue2.0路由切换后页面滚动位置不变BUG
最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. 方法一: 监听路由 // app.vue export default { watch:{ '$route':func ...
随机推荐
- A:点排序-poj
A:点排序 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个点的坐标(x, y),在输入的n个点中,依次计算这些点到指定点的距离,并按照距离进行从小到大排序,并且输出点的坐标 ...
- 在没有DOM操作的日子里，我是怎么熬过来的（终结篇）
前言 在我写终结篇的日子里,Vue版本稳定在2.9.1.当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿. 接下来,正文从这开始~ 好多童鞋学习Vue都有灯 ...
- PAT乙级--1003
1003. 我要通过!(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue "答案正确"是 ...
- SQL面试题：有A B C三列,用SQL语句实现：当A列大于B列时选择A列否则选择B列
.请教一个面试中遇到的SQL语句的查询问题 表中有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列. ------------------- ...
- Jdk8的学习之lambda
在JDK8中,引入了Lambda(读:了母达)表达式的概念,这是我最喜欢的特性,很多东西都变得简单了,一行代码可以搞定. 比如说排序 /** * 这是一个JDK8的lambda的排序应用 */ pub ...
- JavaScript学习笔记（一）数组排序
数组(Array)在JavaScript中是非常常用的类型,关于数组的排序,与C#等语法中的排序,乍看相似,其实差别比较大. Array的排序方法有两个,分别是reverse()和sort(). re ...
- Java数据结构和算法（十）——二叉树
接下来我们将会介绍另外一种数据结构——树.二叉树是树这种数据结构的一员,后面我们还会介绍红黑树,2-3-4树等数据结构.那么为什么要使用树?它有什么优点? 前面我们介绍数组的数据结构,我们知道对于有序 ...
- cronlog分割tomcat catalina.out日志
Tomcat 下日志文件 catalina.out 过大,几百兆或几个G,进而造成再也无法写入更多的日志内容,至使 Tomcat 无法处理请求,所以依靠cronlog来分割: 具体步骤如下: 1.安装 ...
- windows环境Caffe安装配置步骤（无GPU）及mnist训练
在硕士第二年,义无反顾地投身到了深度学习的浪潮中.从之前的惯性导航转到这个方向,一切从头开始,在此,仅以此文记录自己的打怪之路. 最初的想法是动手熟悉Caffe,考虑到直接上手Ubuntu会有些难度, ...
- linux系统编程：进程间通信-fifo
进程间通信-fifo 进程间通信的还有一种方式是fifo. fifo是还有一种管道:有名管道.从名字能够看出.它也是队列. 使用fifo通信前,得先创建fifo $ mkfifo myfifo 随后仅 ...