vue 路由demo
<!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="vue-router.js"></script> </head>
<body> <div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/user/1">Go to user1</router-link>
<router-link to="/user/2/clas">Go to user2</router-link>
<router-link to="/user/3/clas/3">Go to user3</router-link>
<router-link to="/redect">redirect</router-link>
<router-link to="/redectname">redirectname</router-link>
</p>
<router-view></router-view>
</div> <script>
const Bar = {
template: '<div>Bar</div>',
beforeRouteEnter(to,from,next){
console.log('this，，Bar-beforeRouteEnter');
},
beforeRouterUpdate(to,from,next){
console.log('this，，Bar-beforeRouterUpdate');
},
beforeRouterLeave(to,from,next){
console.log('this，，Bar-beforeRouterLeave');
}
}; const Foo = {
template: `<div>Foo
<p>
<router-link :to="{name:'useruser',params:{grade:111,clas:222}}">foo1</router-link>
<router-link to="/foo/foo2/456">foo2</router-link>
-----------------
<router-view></router-view>
-----------------
</p>
</div>`,
beforeRouteEnter(to,from,next){
console.log(`this，，Foo-beforeRouteEnter`);
},
beforeRouterUpdate(to,from,next){
console.log('this，，Foo-beforeRouterUpdate');
},
beforeRouterLeave(to,from,next){
console.log('this，，Foo-beforeRouterLeave');
}
}; const foo1 = {
name:'foo1',
template: '<div>foo1 + {{$route.params}}</div>',
}; const foo2 = {
name:'foo2',
template: '<div>foo2 + {{$route.params}}</div>',
}; const USER = {
template: '<div>USER + {{$route.params}}</div>',
}; const BOSS = {
template: '<div>BOSS + {{$route.params}}</div>',
}; const NULL = {
template: '<div>NULL + {{$route.params}}</div>',
}; const USERERROR = {
template: '<div>USERERROR + {{$route.params}}</div>',
}; const User = {
template:
`<div>
user + {{$route.params}}
<router-link to="/user/1/USER">USER</router-link>
<router-link to="/user/1/BOSS">BOSS</router-link>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div>`,
watch:{
'$route':function(to,from){
//console.log(to);
//console.log(from);
}
},
}; const routes = [
{
path:'/redect',
redirect:'/bar',
},
{
path:'/redectname',
redirect:{name:'ffoooo11',params:{id:123}},
},
{
path: '/foo',
component: Foo,
name:'ffoooo',
children:[
{
path:'foo1/:id',
component:foo1,
name:'ffoooo11'
},
{
path:'foo2/:name',
component:foo2,
},
]
},
{
path: '/bar',
alias:'/a/f/0d/e/r',
component: Bar
},
{
path: '/USER',
component: USERERROR ,
},
{
path: '/user/:grade',
component: User,
children:[
{
path:'USER',
components:{
a:USER,
b:BOSS
}
}
,
{
path:'BOSS',
components:{
a:BOSS,
b:User
}
}
] },
{ path: '/user/:grade/clas', component: User },
{
path: '/user/:grade/clas/:clas',
component: User,
name:'useruser'
},
{ path:'*',component:NULL }
]; const router = new VueRouter({
//mode: 'history',
routes
}); router.beforeEach( (to,from,next) => {
/*console.log(1);
console.log(to);
console.log(from);
console.log(next);
console.log(2);*/
}); const app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
vue 路由demo的更多相关文章
- vue路由DEMO
index.js,index.vue,course.vue,master.vue等 import Vue from 'vue' import Router from 'vue-router' impo ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- Vue路由（vue-router）详细讲解指南
中文文档:https://router.vuejs.org/zh/ Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际 ...
- --@angularJS--一个简单的UI-Router路由demo
1.index.html: <!DOCTYPE HTML><html ng-app="routerApp"><head> <titl ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
随机推荐
- Android 对话框(Dialog) 及 自己定义Dialog
Activities提供了一种方便管理的创建.保存.回复的对话框机制,比如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog( ...
- Hibernate Tools-代码生成
建立好数据库后,点击一个键,代码就生成了,这实在是份十分满意的事情.前面有介绍Hibernate Tools就能够生成代码,那么我们怎么利用它来生成代码呢. 以下就把具体步骤贴出来,相同,有图有真相. ...
- Codeforces Round #282 (Div. 1)B. Obsessive String KMP+DP
B. Obsessive String Hamed has recently found a string t and suddenly became quite fond of it. He s ...
- Rails中关联数据表的添加操作（嵌套表单）
很早就听说有Web敏捷开发这回事,最近终于闲了下来,可以利用业余的时间学些新东西,入眼的第一个东东自然是Ruby on Rails.Rails中的核心要素也就是MVC.ORM这些了,因此关于Rails ...
- （转）用Lottie制作动画,我的月薪翻了一番!！
Lottie是Airbnb发布的开源动画库. 帮助动效落地.学会使用Lottie,会极大地提高工作效率. Lottie是一种新的开发动画的方式. 学会使用Lottie,会极大改善你和开发小哥哥撕逼的情 ...
- Ubuntu下安装tim/QQ/微信
一.安装deepin-wine环境: 上https://github.com/wszqkzqk/deepin-wine-ubuntu页面下载zip包(或用git方式克隆),在“下载”目录下原地解压即可 ...
- BZOJ 3624 并查集 （Kruskal）
思路: 先把所有能加上的水泥路都加上 判断哪些是必加的鹅卵石路 再重新做一遍最小生成树 加上必加的鹅卵石路 一直加鹅卵石路 判一下是不是=k 最后加上水泥路就好了 //By SiriusRen #in ...
- IIS之虚拟目录学习
从刚实习开始就了解到虚拟目录这个词,但是一直没去研究过什么意思,而且也没实际用过.一晃两年过去了,今天正好趁休息,补补脑学习下. 通过百度了解到,虚拟目录创建的目的是为了应对磁盘容量爆满,部署的网站不 ...
- poj 2828 Buy Tickets【线段树 单点更新】
倒着插,先不理解意思,后来看一篇题解说模拟一下 手动模拟一下就好理解了----- 不过话说一直写挫---一直改啊----- 好心塞------ #include <cstdio> #inc ...
- 最新消息，CDRX7冰点价再返现，你知道么？
一年一度的七夕又到来了,这不很多的单身狗朋友们都已经自备好了狗粮,准备在家里宅上一天呢? 开个玩笑今天小编就为各位带来了 一个劲爆大消息... Deng/deng/deng/deng..就是备受万众瞩 ...