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 ...
随机推荐
- 《AndroidStudio每日一贴》3.高速切换代码风格、配色方案和键盘
<AndroidStudio每日一贴>3.高速切换代码风格.配色方案和键盘 高速切换代码风格.配色方案和键盘,使用快捷键: control + ~ 很多其它有用技巧请查看<Andro ...
- UVA 11000- Bee 递推
In Africa there is a very special species of bee. Every year, the female bees of such species give b ...
- UVA - 11762 - Race to 1 记忆化概率
Dilu have learned a new thing about integers, which is - any positive integer greater than 1 can bed ...
- Oracle 11g 学习3——表空间操作
一.表空间概述 表空间是Oracle中最大的逻辑存储结构,与操作系统中的数据文件相相应: 基本表空间:一般指用户使用的永久性表空间,用于存储用户的永久性数据 暂时表空间: 主要用于存 ...
- Swift - 获取应用名称、应用版本、设备型号、系统版本等信息
有时我们在 App 中提交一些统计信息或者用户反馈信息时,为了能更好地进行分析,通常会附带上当前应用程序的名称.版本号.设备型号.以及设备系统版本.下面演示如何获取这些信息. 1,效果图 程序启动后自 ...
- python fuzzy c-means demo
摘自:http://pythonhosted.org/scikit-fuzzy/auto_examples/plot_cmeans.html#example-plot-cmeans-py,加入了自己的 ...
- hdoj--1051--Wooden Sticks(LIS)
Wooden Sticks Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- Oracle RAC 全局等待事件 gc current block busy 和 gc cr multi block request 说明--转载（http://blog.csdn.net/tianlesoftware/article/details/7777511）
一．RAC 全局等待事件说明 在RAC环境中,和全局调整缓存相关的最常见的等待事件是global cache cr request,global cache busy和equeue. 当一个进程访问需 ...
- 38.Qt模型/视图结构
1.模型/视图类 2.模型 3.视图 4.代理 1 模型/视图类 InterView框架提供了一些可以直接使用的模型类和视图类,如QStandardModel类,QDirModel类,QStringL ...
- ROS安装教程
对于ROS的安装,在它的官方网站: http://wiki.ros.org/ROS/Installation 中也有详细说明.但是对于像博主这样先天英语发育不全的人来说,直接看官网还是有点困难的. 所 ...