前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue-router2 写法示例

vue-router2 写法示例

作者头像
前端GoGoGo
发布2018-08-24 15:18:32
5350
发布2018-08-24 15:18:32
举报
文章被收录于专栏:九彩拼盘的叨叨叨

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

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

配置路由

代码语言:javascript
复制
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 要有

代码语言:javascript
复制
<router-view></router-view>

跳转页面

在 HTML中这么写

代码语言:javascript
复制
<router-link to="/home">Home</router-link>
<!-- 或 -->
<router-link :to="'/home'">Home</router-link>

在 JS 中这么写

代码语言:javascript
复制
this.$router.push(url)

不记入历史记录的写法:

代码语言:javascript
复制
this.$router.replace(url)

前进后退

代码语言:javascript
复制
// 后退
this.$router.go(-1)
// 前进
this.$router.go(1)

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

获取参数

代码语言:javascript
复制
this.$route.params.参数名

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

获取查询参数

代码语言:javascript
复制
this.$route.query.查询参数名

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

获取路径

代码语言:javascript
复制
this.$route.path
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.04.27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 配置路由
  • 跳转页面
  • 前进后退
  • 获取参数
  • 获取查询参数
  • 获取路径
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档