文档章节

Vue中路由管理器Vue Router使用介绍(三)

tianma3798
 tianma3798
发布于 2018/10/17 22:51
字数 435
阅读 165
收藏 4

一、路由定义添加动态参数定义

1.路由定义项,使用:xx 方式 定义动态参数

    {
      path:'/user/:id/:name',
      name:'user',
      component:()=>import('./views/User.vue')
    }

2.获取动态参数,全局变量$route

在视图中使用:

<template>
    <el-alert type='success' title="提示">
        <el-button type='warn'>{{$route.params.id}}</el-button>
        {{$route.params.name}}

       <el-button type='primary' @click="backIndex()">返回首页</el-button>

       <router-link to='/'>返回首页</router-link>
    </el-alert>
</template>

在js中使用:

  methods: {
    backIndex() {
      //打印参数
      console.info(this.$route);
    }
  }

二、路由链接使用

1.使用router-link 定义跳转链接

   <router-link to="/">
    <el-button>跳转首页</el-button>
   </router-link>
 <router-link to="/about">
    <el-button>跳转关于我们</el-button>
   </router-link>
    <router-link to="/user/10/张三">
    <el-button>跳转会员10</el-button>
   </router-link>

2.使用js跳转

  methods: {
    backIndex() {
      //在 js中跳转
      this.$router.push({ name: "home" });
    }
  }

更多示例:

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

也可以使用

 _this.$router.replace('/');

三、动态注册路由、异步注册路由

$router.addRoutes()方法可以动态向路由数据添加路由元数组。

  created: function() {
    var _this = this;
    setTimeout(() => {
      _this.$router.addRoutes([
        {
          path: "/form2",
          name: "form2",
          component: () => import("./views/Form2.vue")
        }
      ]);
    }, 1000);
  },
  created: function() {
    var _this = this;

    var list = [2, 3];
    var routes = [];
    for (var i = 0; i < list.length; i++) {
      var index = list[i];
      (function(item) {
        var comp = import("./views/Form" + item + ".vue");
        routes.push({
          path: "/form" + item,
          name: "form" + item,
          component: () => comp
        });
      })(index);
    }
    _this.$router.addRoutes(routes);
  },

更多:

Vue中路由管理器Vue Router使用方式(二)-推荐

Vue中路由管理器Vue Router使用方式(一)

Element UI框架+Vue开发搭建示例

© 著作权归作者所有

tianma3798
粉丝 16
博文 144
码字总数 42290
作品 0
济南
高级程序员
私信 提问
Vue element 二级菜单绑定示例

一、element ui 中动态绑定二级菜单示例 1.视图绑定 显示结果: 更多: Vue中路由管理器Vue Router使用介绍(三) Vue中路由管理器Vue Router使用方式(二)-推荐 Vue中路由管理器Vue Route...

tianma3798
2018/10/18
0
0
Vue element 表格获取选中项操作

一、在使用element table表格时,获取选中项处理 1.视图 2.js 更多: Vue element 二级菜单绑定示例 Vue中路由管理器Vue Router使用介绍(三) Vue中路由管理器Vue Router使用方式(二)-推荐...

tianma3798
2018/10/18
0
0
Vue element表格分页数据加载示例

一、element ui表格分页数据加载示例 1.视图 2. js 显示结果: 二、后台接口代码 更多: Vue element 表格获取选中项操作 Vue element 二级菜单绑定示例 Vue中路由管理器Vue Router使用介绍(...

tianma3798
2018/10/18
0
0
Vue-router(一) HelloWorld

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是...

阿刚ABC
2018/04/19
0
0
Vue中路由管理器Vue Router使用方式(二)-推荐

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件 使用步骤,本人假设已经安装好了Vue CLI工具,了解更多参考:VSCode 搭建Vue开发环境之Vue CLI 1.创建项目 创建过程比较慢,需...

tianma3798
2018/10/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Flutter移动端实战手册

该文章属于<简书 — 刘小壮>原创,转载请注明: <简书 — 刘小壮> https://www.jianshu.com/p/d27c1f5ee3ff iOS接入Flutter 在进行iOS和Flutter的混编时,iOS比Android的接入方式略复杂,但也...

刘小壮
今天
2
0
测试环境项目一键部署

git项目测试环境一键部署脚本 #!/bash/sh pid=`ps -ef | grep 'user_demo.jar' | grep -v grep | awk '{print $2}'` kill -9 $pid #跳转到git clone下目录 cd /home/apple/userdemo/ #拉取最......

ccman996
今天
1
0
使用SecureCRT从windows上传文件到Linux

点击File,然后选择SFTP,打开SFTP,然后进行下列操作。 1.指定文件所在路径 lcd E:\ 2.查看当前windows文件所在路径 lpwd 3.指定linux下文件上传路径 cd /usr/local 4.查询当前linux文件上传...

大雁南飞了
今天
4
0
前后端分离-前端搭建(Vue)(3)加入Element和axios

继续上篇博客的Vue刚刚搭建完 , https://my.oschina.net/u/4116654/blog/3064431 这次我们来把Element 和axios弄好 首先先安装Element 下载好了之后 在src目录下的main.js里去添加Element的...

咸鱼-李y
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部