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: ...
随机推荐
- HDU-5009 Paint Pearls 动态规划 双向链表
题目链接:https://cn.vjudge.net/problem/HDU-5009 题意 给一串序列,可以任意分割多次序列,每次分割的代价是被分割区间中的数字种数. 求分割区间的最小代价.n< ...
- 51nod 1526 分配笔名（Trie树+贪心）
建出Trie树然后求出一个点子树中有多少笔名和真名.然后贪心匹配即可. #include<iostream> #include<cstring> #include<cst ...
- Ubuntu16.04 lnmp 环境搭建
Ubuntu16.04 lnmp 环境搭建 nginx 安装 sudo apt-add-repository ppa:nginx/stablesudo apt-add-repository ppa:o ...
- 紫书 习题 8-15 UVa 1617 （贪心）
先排序, 然后每个线段先放右端点, 然后往下放, 如果不能放就整体往左移动, 当不能往左移动的时候就ans++ 开始下一个整块.判断能不能向左移动要用一个变量储存每个已经放了的区间中线段与左端点距离的 ...
- UVA 12003 Array Transformer
Array Transformer Time Limit: 5000ms Memory Limit: 131072KB This problem will be judged on UVA. Orig ...
- Python学习第一天-编写登陆接口
编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 帐号文件user.txt内容如下: qaz 123qwe 12345qweqwr 12321424...... 锁文件user_l ...
- 洛谷—— P2663 越越的组队
https://www.luogu.org/problem/show?pid=2663 题目描述 班级要组织一场综合能力竞赛,全班同学(N个,N是偶数)分成两队互相竞争.老师找到了越越并给了越越一张全 ...
- 基于Masonry自己主动计算cell的高度
/** * This is a very very helpful category for NSTimer. * * @author huangyibiao * @email huangyibiao ...
- 软件project之软件设计
英雄是随着历史的时代产生的.软工也不例外.软件project这一门学科主要是为了解决当代软件危机而诞生的, 学习软件project的视频过后,最终让我揭开了它的神奇面纱,让我对软工设计有了一个初步的认 ...
- bzoj1831: [AHOI2008]逆序对(DP+双精bzoj1786)
1831: [AHOI2008]逆序对 Description 小可可和小卡卡想到Y岛上旅游,但是他们不知道Y岛有多远.好在,他们找到一本古老的书,上面是这样说的: 下面是N个正整数,每个都在1~K之 ...