vue.2.0-路由
vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:
1. 布局
<router-link to="/home">主页</router-link> <router-view></router-view>
2. 路由具体写法
//组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
}; //配置路由
const routes=[
{path:'/home', componet:Home},
{path:'/news', componet:News},
]; //生成路由实例
const router=new VueRouter({
routes
}); //最后挂到vue上
new Vue({
router,
el:'#box'
});
3. 重定向
之前 router.rediect 废弃了
{path:'*', redirect:'/home'}
------------------------------------------
路由嵌套:
/user/username const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
];
------------------------------------------
/user/strive/age/10 :id
:username
:age
------------------------------------------
路由实例方法:
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>
.router-link-active{
font-size: 20px;
color:#f60;
}
</style>
<script src="vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<div id="box">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div> <script>
//组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
}; //配置路由
const routes=[
{path:'/home', component:Home},
{path:'/news', component:News},
{path:'*', redirect:'/home'} //跳转
]; //生成路由实例
const router=new VueRouter({
routes
}); //最后挂到vue上
new Vue({
router,
el:'#box'
});
</script>
</body>
</html>
<!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>
.router-link-active{
font-size: 20px;
color:#f60;
}
</style>
<script src="vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<div id="box">
<div>
<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 User={
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li><router-link to="/user/username">某个用户</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
};
var UserDetail={
template:'<div>我是XX用户</div>'
}; //配置路由，路由嵌套
const routes=[
{path:'/home', component:Home},
{ <!--父路由-->
path:'/user',
component:User,
children:[
{path:'username', component:UserDetail}<!--子路由-->
]
},
{path:'*', redirect:'/home'} //404
]; //生成路由实例
const router=new VueRouter({
routes
}); //最后挂到vue上
new Vue({
router,
el:'#box'
});
</script>
</body>
</html>
<!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>
.router-link-active{
font-size: 20px;
color:#f60;
}
</style>
<script src="vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<div id="box">
<div>
<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 User={
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li><router-link to="/user/strive/age/10">Strive</router-link></li>
<li><router-link to="/user/blue/age/80">Blue</router-link></li>
<li><router-link to="/user/eric/age/70">Eric</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
};
var UserDetail={
template:'<div>{{$route.params}}</div>'
<!-- { "username": "strive", "age": "10" } -->
}; //配置路由
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[
{path:':username/age/:age', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
]; //生成路由实例
const router=new VueRouter({
routes
}); //最后挂到vue上
new Vue({
router,
el:'#box'
});
</script>
</body>
</html>
<!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>
.router-link-active{
font-size: 20px;
color:#f60;
}
</style>
<script src="vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="添加一个路由" @click="push">
<input type="button" value="替换一个路由" @click="replace">
<div>
<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 User={
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li><router-link to="/user/strive/age/10">Strive</router-link></li>
<li><router-link to="/user/blue/age/80">Blue</router-link></li>
<li><router-link to="/user/eric/age/70">Eric</router-link></li>
</ul>
<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'} //404
]; //生成路由实例
const router=new VueRouter({
routes
}); //最后挂到vue上
new Vue({
router,
methods:{
push(){
router.push({path:'home'});
},
replace(){
router.replace({path:'user'});
}
}
}).$mount('#box');
</script>
</body>
</html>
<!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>
.router-link-active{
font-size: 20px;
color:#f60;
}
</style>
<script src="vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.min.js"></script>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div id="box">
<input type="button" value="添加一个路由" @click="push">
<input type="button" value="替换一个路由" @click="replace">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<router-view></router-view>
</transition>
</div>
</div> <script>
//组件
var Home={
template:'<h3>我是主页</h3>'
};
var User={
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li><router-link to="/user/strive/age/10">Strive</router-link></li>
<li><router-link to="/user/blue/age/80">Blue</router-link></li>
<li><router-link to="/user/eric/age/70">Eric</router-link></li>
</ul>
<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'} //404
]; //生成路由实例
const router=new VueRouter({
routes
}); //最后挂到vue上
new Vue({
router,
methods:{
push(){
router.push({path:'home'});
},
replace(){
router.replace({path:'user'});
}
}
}).$mount('#box');
</script>
</body>
</html>
vue.2.0-路由的更多相关文章
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- vue 2.0 路由创建的详解过程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 2.0 路由全局守卫
vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...
- 使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...
- 新手入门指导：Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- vue2.0路由
现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...
- vue教程3-01 路由、组件、bower包管理器使用
vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...
- 新手向：Vue 2.0 的建议学习顺序
新手向:Vue 2.0 的建议学习顺序 尤雨溪 1 年前 注:2.0 已经有中文文档 .如果对自己英文有信心,也可以直接阅读英文文档.此指南仅供参考,请根据自身实际情况灵活调整.欢迎转载,请注明出 ...
- vue2.0路由写法、传参和嵌套
前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...
随机推荐
- 解决com.mysql.jdbc.PacketTooBigException: Packet for query is too large问题
2017年05月10日 09:45:55 阅读数:1659 在做查询数据库操作时,报了以上错误,原因是MySQL的max_allowed_packet设置过小引起的,我一开始设置的是1M,后来改为了2 ...
- linux磁盘管理与分区 转载
原文:http://zhengjianglong.leanote.com/post/linux%E7%A3%81%E7%9B%98%E5%88%86%E5%8C%BA 一.基础知识 一块磁盘可以分为多 ...
- 堆(Heap)-c实现
这个堆的实现采用数组存储的完全二叉树实现. 最近有点烦躁,先是跳槽到了一个外包公司,感觉2016有点坑,另外一件事就是老婆怀孕了,但是在家里没人照顾,很担心. 这个堆的实现就暂时不优化了,基本的插入, ...
- Centos7 安装 opencv
Centos7 安装 opencv CentOS Linux release 7.2.1511 (Core) 1.安装依赖 yum install https://dl.fedorap ...
- docker系列之一 image和container
docker images往往不知不觉就占满了硬盘空间,为了清理冗余的image,可采用以下方法: 1.进入root权限 sudo su 2.停止所有的container,这样才能够删除其中的imag ...
- 题解 P3834 【【模板】可持久化线段树 1（主席树）】
可持久化线段树的前置知识是权值线段树,但是你不学也没有太大的关系因为思想不是很难理解. 可持久化线段树支持历史记录查询,这是它赖以解题的方法. 在本题中思路是建立n颗线段树,然后对于每次询问,考虑其中 ...
- Eclipse中JSON文件报错，如何解决？
eclipse里面的JSON文件老报错,虽然可以正常运行,但红X看起来就是不爽,怎么解决呢? 这是因为Eclipse认为JSON文件不需要注释,所以报的编译错误,我们可以通过Eclipse的设置把它的 ...
- Linux 设备驱动之 UIO 机制（基本概念）
一个设备驱动的主要任务有两个: 1. 存取设备的内存 2. 处理设备产生的中断 对于第一个任务.UIO 核心实现了mmap()能够处理物理内存(physical memory),逻辑内存(logica ...
- 足球大数据：致足球怀疑论者-The Counter(s)-Reformation反教条改革
足球大数据:致足球怀疑论者-The Counter(s)-Reformation反教条改革 注:本序列文章都是本人对<The Numbers Game>书(豆瓣链接http://book. ...
- hdu-2871
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...