VUE进阶(路由等)
vue2.0+elementUI构建单页面后台管理平台: http://www.cnblogs.com/dmcl/p/6722315.html
初级教程:http://www.cnblogs.com/dmcl/p/6137469.html
VUE进阶
自定义指令
http://cn.vuejs.org/v2/guide/custom-directive.html#简介
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
使用 <input v-focus>
路由
文档来自:http://router.vuejs.org/zh-cn/
- 简单路由示例
<head>
<meta charset="UTF-8">
<title>路由</title>
<script src="//cdn.bootcss.com/vue/2.0.3/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.3"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
// 0. 如果使用模块化机制编程, 要调用 Vue.use(VueRouter)
// 1. 定义(路由)组件。可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };
// 2. 定义路由映射
// 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器,或者,只是一个组件配置对象。
const my_routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
];
// 3. 创建 router 实例,然后传 `routes` 配置 你还可以传别的配置参数, 不过先这么简单着吧。
const app_router = new VueRouter({
routes:my_routes // (缩写)相当于 routes: routes
});
// 4. 创建和挂载根实例。记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能
const app = new Vue({
router:app_router
}).$mount('#app');
// 现在,应用已经启动了!
</script>
当 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active
- 组件嵌套
<div id="app2">
<p>
<router-link to="/user/foo">/user/foo</router-link>
<router-link to="/user/foo/profile">/user/foo/profile</router-link>
<router-link to="/user/foo/posts">/user/foo/posts</router-link>
</p>
<router-view></router-view>
</div>
<script>
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.my_id }}</h2>
<router-view></router-view>
</div>
`
};
//上面的$route.params.my_id,my_id是匹配的参数,是显示文本 与路由无关
const UserHome = { template: '<div>Home</div>' };
const UserProfile = { template: '<div>Profile</div>' };
const UserPosts = { template: '<div>Posts</div>' };
const router = new VueRouter({
routes: [
{ path: '/user/:my_id', component: User,
children: [
//
{ path: '', component: UserHome },
// 当 /user/:id/profile 匹配成功, UserProfile 会被渲染在 User 的 <router-view> 中
{ path: 'profile', component: UserProfile },
// 同上
{ path: 'posts', component: UserPosts }
]
}
]
});
const app2 = new Vue({ router }).$mount('#app2')
</script>
- 编程式导航
使用 router.push 方法。这个方法会向 history 栈添加一个新的记录
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名路由 name
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
replace(location) 类似push 但不改变history
router.go(1) ;
这些方法都是模仿window.historyAPI的window.history.pushState、window.history.replaceState 和 window.history.go
:to和to是一样的
- 命名路由例子
<div id="app3"></div>
<script>
Vue.use(VueRouter)
//组件
const Home = { template: '<div>This is Home</div>' }
const Foo2 = { template: '<div>This is Foo</div>' }
const Bar2 = { template: '<div>This is Bar {{ $route.params.id }}</div>' }
//路由
const router3 = new VueRouter({
// mode: 'history',
routes: [
{ path: '', name: 'home', component: Home },
{ path: 'foo2', name: 'foo22', component: Foo2 }, // url: /foo2
{ path: 'bar2/:id', name: 'bar22', component: Bar2 } // url: /bar2/123
]
});
new Vue({
router:router3,
template: `
<div id="app3">
<h1>Named Routes</h1>
<p>Current route name: {{ $route.name }}</p>
<ul>
<li><router-link :to="{ name: 'home' }">home</router-link></li>
<li><router-link :to="{ name: 'foo22' }">foo</router-link></li>
<li><router-link :to="{ name: 'bar22', params: { id: 123 }}">bar</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app3')
</script>
- 命名视图
一个视图才有一个组件渲染。一个路由 多个视图就要用多个组件。
路由写法:
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
代码参考:https://jsfiddle.net/posva/6du90epg/
- 重定向
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
也可以是 { path: '/a', redirect: { name: 'foo' }}
也可以是(结合ES6箭头函数,箭头函数可参考:https://imququ.com/post/arrow-function-in-es6.html )
{ path: '/dynamic-redirect/:id?',
redirect: to => {
const { hash, params, query } = to
if (query.to === 'foo') {
return { path: '/foo', query: null }
}
if (hash === '#baz') {
return { name: 'baz', hash: '' }
}
if (params.id) {
return '/with-params/:id'
} else {
return '/bar'
}
}
},
更多用法 参考:http://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html
- 别名
重定向是真的指向了新的路径 而别名只是换了个名字b 生效的还是a
{ path: '/a', component: A, alias: '/b' }
- history 与 404
mode: 'history',
需要后端配置 - 钩子
参考: http://router.vuejs.org/zh-cn/advanced/navigation-guards.html
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
before钩子:to 即将进入的 from 当前导航要离开的 next 来执行钩子
after 钩子:
未完待续
VUE进阶(路由等)的更多相关文章
- vue进阶:vue-router(vue路由)的安装与基本使用
vue路由安装与基本使用 vue嵌套路由 vue动态路由(路由组件传参) vue路由重定向和一些其他的路由相关 官方手册:https://router.vuejs.org/zh/ 一.vue路由安装与 ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue权限路由实现方式总结二
之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...
- Vue 多路由文件的合并
Vue 多路由文件的合并 1.使用的是ES6 数组的合并方法 let routes = new Set([...routes1, ...homerouters]);2.两个路由文件,导出的实际上就是一 ...
随机推荐
- Java设计模式之《组合模式》及应用场景
摘要: 原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/6489827.html 组合模式,就是在一个对象中包含其他对象,这些被包含的对象可能是 ...
- dll
dll可以有一个入口点函数,系统会在不同的时候调用这个入口函数.这个调用是通知性质的,通常被dll用来执行一些与进程或线程有关的初始化和清理工作如果将dll的入口点函数命名为DllMain之外的其他名 ...
- RAP在Linux 上的部署
首先讲一下,rap 是什么东西 ,rap 是一种项目的管理工具.用来管理项目的接口的. 首先是在Linux 上装了一个tomcat8 .当然jdk 的环境是必须要有的, 在rap的官网下载了war包 ...
- WebGIS前端瓦片地图显示原理及实现
目前,有很多WebGIS开发包,ArcGIS API for JS.OpenLayers.LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能.我们很方便的使用这些库的时候,也让我们 ...
- ArrayList源码剖析
ArrayList简介 ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长,类似于C语言中的动态申请内存,动态增长内存. ArrayList不是线程安全的,只能用在单线程环境下,多线 ...
- 3360: [Usaco2004 Jan]算二十四
3360: [Usaco2004 Jan]算二十四 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 6 Solved: 6[Submit][Statu ...
- Effective Modern C++ Item 27:重载universal references
假设有一个接收universal references的模板函数foo,定义如下: template<typename T> void foo(T&& t) { cout ...
- 《Machine Learning》系列学习笔记之第一周
<Machine Learning>系列学习笔记 第一周 第一部分 Introduction The definition of machine learning (1)older, in ...
- 树链剖分-SPOJ375(QTREE)
QTREE - Query on a tree You are given a tree (an acyclic undirected connected graph) with N nodes, a ...
- 解决Chrome动画”卡顿”的办法
为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);,这两个属性都会开启GPU硬 ...