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 ...
随机推荐
- UVA 11426 - GCD - Extreme (II) 欧拉函数-数学
Given the value of N, you will have to find the value of G. The definition of G is given below:G =i< ...
- kubernetes系列：（一）、kubeadm搭建kubernetes（v1.13.1）单节点集群
kubeadm是Kubernetes官方提供的用于快速部署Kubernetes集群的工具,本篇文章使用kubeadm搭建一个单master节点的k8s集群. 节点部署信息 节点主机名 节点IP 节点角 ...
- HttpClient简单操作
HttpClient 这个框架主要用来请求第三方服务器,然后获取到网页,得到我们需要的数据: HttpClient设置请求头消息User-Agent模拟浏览器 比如我们请求 www.tuicool.c ...
- ROS-OPENCV
前言:opencv是一个开源的跨平台计算机视觉库. 前提:1.已下载并编译了相关功能包集,如还未下载,可通过git下载:https://github.com/huchunxu/ros_explorin ...
- c# TextBox
1. text内容全选事件 textBox1.selectAll(); 2.失去与获取焦点事件 textox1.LostFocus += new EventHandler(txt_LostFocus) ...
- 欢迎来到SQL学院
给学习SQL的同学的福利@ http://sqlschool.modeanalytics.com/ 第一部分 学习SQL 本教程是专为那些想用数据回答问题的人们而设计的.从很大程度上讲,SQL是数据分 ...
- HTML5 CSS3面试题
一.CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...
- SQL的几个路径
这个是主数据库文件存放的地方 C:\Program Files\Microsoft SQL Server\MSSQL12.MSSQLSERVER2014\MSSQL\DATA
- MongoDB_安装
windows安装MongoDB 官网下载地址:https://www.mongodb.com/download-center?jmp=nav#community (1)如图点击DOWNLOAD进行下 ...
- luogu P3391 【模板】文艺平衡树（Splay） 非旋转treap
Code: #include<bits/stdc++.h> using namespace std; void setIO(string s) { string in=s+".i ...