vue-router2 写法示例

做单页应用,需要客户端路由。用 Vue.js 做单页应用,一般都用 vue-router 做客户端路由。文档地址点这里

注意:vue-router2 需要配合 Vue2 用。

配置路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

var router = new Router({
  // 路由规则
  routes: [
    {
      path: `/login`,
      component: resolve => {
        lazyLoading(resolve, 'system/Login')
      },
    },
    ...
    // 找不到路由的默认地址
    {
      path: '*',
      redirect: '/'
    }
  ]
})

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

// 懒加载组件
const lazyLoading = (resolve, name, index = false) => {
  require.ensure([], function(require) {
    resolve(require(`@/views/${name}${index ? '/Index' : ''}.vue`));
  })
}

HTML 要有

<router-view></router-view>

跳转页面

在 HTML中这么写

<router-link to="/home">Home</router-link>
<!-- 或 -->
<router-link :to="'/home'">Home</router-link>

在 JS 中这么写

this.$router.push(url)

不记入历史记录的写法:

this.$router.replace(url)

前进后退

// 后退
this.$router.go(-1)
// 前进
this.$router.go(1)

router.pushrouter.replacerouter.go 是效仿 window.history API 的。

获取参数

this.$route.params.参数名

如, 路由中设置的路径是: /list/:id,真实路径是 /list/3,这么写 this.$route.params.id

获取查询参数

this.$route.query.查询参数名

对于路径 /foo?user=1,则 this.$route.query.user 的值是 1。

获取路径

this.$route.path

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小白安全

两款网站loading特效

放置head文件或者footer文件都可以,灵活运用 废话不多说直接上代码 <script type="text/javascript"> jQu...

31050
来自专栏阿杜的世界

JVM、GC和常用命令

这是11月份的一个分享,借着组内分享的机会,重新梳理了一遍JVM的一些基本概念和学习资料。在这个PPT中,关于G1的部分比较粗略,最近正在恶补G1的知识,后面可...

10430
来自专栏Core Net

Bootstrap table使用心得---thead与td无法对齐的问题

47460
来自专栏好好学习吧

在博文顶部添加文章字数及阅读时间信息:阅读本文需要xx分钟

47460
来自专栏技术博文

十个需要牢记的Ubuntu快捷键

在Ubuntu中有不少大家熟知的快捷键,相信大家在使用中也会用到相应的快捷键。在本文中为大家总结经常使用的十个Ubuntu快捷键。相信本文对还不知道这些快捷键的...

34690
来自专栏游戏杂谈

Bootstrap的表单设计器

如果是内部系统或是自己需要写个简单点的页面,可以直接使用Twitter的Bootstrap,而这个表单器也是非常好用,直接拖拽,设置属性,得到一个很漂亮的表单...

42220
来自专栏王二麻子IT技术交流园地

《跟我学IDEA》五、快捷键(编码利器)

上一篇博文,我们学习了idea的一些模版配置,但是只有模版是不行的,一款编辑器如何能为我们灵活的使用,快捷键的功劳不用多说大家也明白。今天我们就来学习快捷键的配...

34260
来自专栏每日一篇技术文章

weex-10-组件a的使用

a标签使用起来比较简单,先留下一个问题,如果想要跳转到html页面怎么实现?我们后面会讲到!

14320
来自专栏编程微刊

混合开发

17930
来自专栏计算机编程

【vue随手笔记】MuseUI 自定义 select 适配 mobile

通过 emit将result值发给外部实现字父组件的双向绑定,于是父组件获取result值即:

14220

扫码关注云+社区

领取腾讯云代金券