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

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {

  // ...

})

before钩子：to 即将进入的 from 当前导航要离开的 next 来执行钩子

after 钩子:

未完待续

VUE进阶(路由等)的更多相关文章

  1. vue进阶：vue-router（vue路由）的安装与基本使用

    vue路由安装与基本使用 vue嵌套路由 vue动态路由(路由组件传参) vue路由重定向和一些其他的路由相关 官方手册:https://router.vuejs.org/zh/ 一.vue路由安装与 ...

  2. vue（5）—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  3. vue父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失

    vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...

  4. vue的路由映射问题

    遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...

  5. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  6. Vue.js路由

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  7. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  8. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

  9. Vue 多路由文件的合并

    Vue 多路由文件的合并 1.使用的是ES6 数组的合并方法 let routes = new Set([...routes1, ...homerouters]);2.两个路由文件,导出的实际上就是一 ...

随机推荐

  1. 做推送，怎么能不了解推送的 4 种消息形式呢？（ Android 篇）

    极光推送是为 App 提供第三方推送服务的平台之一,它提供四种消息形式:通知,自定义消息,富媒体和本地通知. 笔者将基于官方说明与个人理解来谈一下这四种消息.本篇为 Android 篇,iOS 篇入口 ...

  2. 利用smarty模板（登录、有关信息操作等功能）

    smarty模板前提是:前端和后端是分开的,所以肯定会有很多的后台页面,php页面和html页面是分开存储的. (1)登录页面的编写也是分两个页面(后台和前端) 1.首先是后台的php页面,很简单只要 ...

  3. SEO-站外优化规范

    站外优化规范 新站 前期(提高网站曝光率<信息发布平台>) 一． 分类目录信息发布 二． 黄页网信息发布 三． 友链平台信息发布 四． 各大论坛引蜘蛛区信息发布 五． 网址提交 六． 社区 ...

  4. 如何在appconfig中配置服务的ip

    开发了一个WindowsService消息服务器,刚开始一直都是在代码中把IP地址写死,所以每次只要是更换了新的IP地址后,都需要重新编译项目.所以考虑把ip配置到config文件中, 这样做的好处是 ...

  5. Dollar Dayz poj3181

    http://poj.org/problem?id=3181 这个题目一开始就能看出来是个dp问题,但是我并没有一开始就看出来是一个完全背包为题,只是想着根据以前的方法,这个问题应该是可以找到规律的, ...

  6. 从客户端中检测到有潜在危险的 Request.Form或Requst.String的值。

    在ASP中客户端请求服务时会出现"从客户端中检测到有潜在危险的 Request.Form或Requst.QueryString的值.",原因是在web.config配置文件中存在这 ...

  7. 基于Modbus的C#串口调试开发

    说明:本文主要研究的是使用C# WinForm开发的串口调试软件(其中包含Modbus协议相关操作).Modbus相关协议可以查阅百度文库等,可参考: <http://wenku.baidu.c ...

  8. 重启osd服务失败：Start request repeated too quickly

    背景 OS:Ubuntu 16.04 修改了osd的一些配置,修改后,需要重启osd服务才能生效.第一次重启后,配置立刻生效.再改了一些配置,重启osd服务后,配置却不再生效了.ps命令查看进程,发现 ...

  9. Asp.net web api 知多少

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...

  10. dev机上数据库中批量生成table

    我的低效方法: 通过本地php脚本进行create: <?php //0-63 header("Content-type:text/html;charset=utf-8"); ...