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 ...
随机推荐
- （素数求解）I - Dirichlet's Theorem on Arithmetic Progressions(1.5.5)
Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit cid=1006#sta ...
- String与StringBuffer的差别
String 是一个常量,即一旦创建不可更改 输出结果为:helloworldjeok 看似.string变量name的值改变了,事实上此name非彼name. 输出结果为: sex:hello wo ...
- 2015.04.19,外语,读书笔记-《Word Power Made Easy》 11 “如何辱骂敌人” SESSION 29
1.the French drillmaster 法国国王路易十五手下的Jean Martinet将军,是Infantry(['infәntri] n. 步兵)的检察长,是一个非常严格的drillma ...
- gdb help all 帮助信息
Command class: aliases ni -- Step one instruction rc -- Continue program being debugged but run it i ...
- c2
#include <stdio.h> int main() { // 整型常量 ; // 实型常量(小数) // 单精度float / 双精度double // 注意: 默认情况下编写的小 ...
- 使用VMware搭建3台一模一样的Linux虚拟机
转自:https://www.linuxidc.com/Linux/2014-08/105909.htm 简介:VMware可以在个人本地一台笔记本机器上同时运行二个或更多Windows.DOS.LI ...
- 常见问题处理之Emoji
所谓Emoji就是一种在Unicode位于\u1F601-\u1F64F区段的字符.这个显然超过了目前常用的UTF-8字符集的编码范围\u0000-\uFFFF.Emoji表情随着IOS的普及和微信的 ...
- 如何解决“因为计算机中丢失php_mbstring.dll”
配置编译环境时,php.exe报系统错误,无法启动此程序,因为计算机中丢失php_mbstring.dll. 在C:\Windows找到php.ini文件,ctrl+f找到extension=php_ ...
- ASP.NET中各种缓存技术的特点及使用场景
对于一些不经常改变却经常被request的数据,我们喜欢将它们缓存在内存.这样用户请求时先到缓存中去取,如果缓存中没有,再去数据库拿,提高响应速度.缓存一般实现在BLL,这样可以与DAL分离,更换数据 ...
- 尝试实现bootstrap3网格系统
这是一篇搁置了很久的博文,个人实现的关键代码如下: // 这是用sass实现的,只是大致实现了网格系统和offset的功能 $size_list: ( xs: 0, sm: 576, md: 992, ...