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帧动画,移动位置,缩放,改变透明度等动画解说
1.苦逼的需求又来了,须要实现一些动画效果,第一个想到的是播放gif图片,可是这样会占包的资源,而且清晰度不高,于是想着程序实现,自己用帧动画+缩放+移动+透明度 实现了一些想要的效果,这里跟大家分享 ...
- 又一次发现Oracle太美之glogin.sql
又一次发现Oracle太美之glogin.sql 刚開始接触Oracle的时候,有时候一登陆一个生产环境.常常会出现以下的情况: [oracle@rh64 app]$ sqlplus / as sys ...
- PySide2运行出错问题解决
PySide2是QT官方出的Python的QT封装, 不过默认安装运行时候会有一些小问题, 可能是系统里已经安装过其他版本QT的原因, 会报错如下: PySide2 qt.qpa.plugin: Co ...
- 一个Python项目的创建架构
要进行Python项目的编写,很多人刚开始一筹莫展,不知道该如何去构建一个项目,现在粗略的描述一下一个项目的创建过程,供大家参考了解一下: 大家可以先忽略其中创建的函数 ,每个包的含义都有定义,大家可 ...
- POJ 3628 01背包 OR 状压
思路: 1.01背包 先找到所有奶牛身高和与B的差. 然后做一次01背包即可 01背包的容积和价格就是奶牛们身高. 最后差值一减输出结果就大功告成啦! 2. 搜索 这思路很明了吧... 搜索的确可以过 ...
- 微信公众号测试账号-redirect_uri域名与后台配置不一致，错误代码:10003
微信公众号测试账号-redirect_uri域名与后台配置不一致,错误代码:10003 进入公众平台测试账号. 登录公众账号--"开发者中心"--"公众平台测试账号&qu ...
- 快速搭建golden gate环境
准备操作系统用户和文件系统 准备安装和运行用户(操作系统用户) 建议使用Oracle用户 也可使用新建用户,但需做以下配置 该用户必须加入到oinstall组 该用户使用与oracle相同的profi ...
- DB2查看表空间和增加表空间容量
Db2 connect to xxx Db2 “LIST TABLESPACES SHOW DETAIL” Tablespace ID = 7 Name = TSASNAA Type = Databa ...
- iOS保持流畅有哪些秘诀? 除了黑科技GPU还有这些重要原因 期待安卓8.0流畅度逆袭
经常有人提起iPhone使用起来要比Android手机流畅,现在谈谈为什么iOS使用中会让人觉得更加流畅一些.一方面iPhone的顶级硬件为iOS的流畅打好了基础,另一方面,专一定制的系统是保证体验的 ...
- Dynamic programming language
动态改变运行时结构 Dynamic programming language, in computer science, is a class of high-level programming la ...