Vue中路由管理器Vue Router使用介绍（三）

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

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);
  },

四、深入路由动态配、通配符、正则表达式验证

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}
    {
      path: '/about/:name?', //问号表示当前参数可以为空
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }

更多正则路由约束示例：

 routes: [
    { path: '/' },
    // params are denoted with a colon ":"
    { path: '/params/:foo/:bar' },
    // a param can be made optional by adding "?"
    { path: '/optional-params/:foo?' },
    // a param can be followed by a regex pattern in parens
    // this route will only be matched if :id is all numbers
    { path: '/params-with-regex/:id(\\d+)' },
    // asterisk can match anything
    { path: '/asterisk/*' },
    // make part of the path optional by wrapping with parens and add "?"
    { path: '/optional-group/(foo/)?bar' }
  ]

响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

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

Vue中路由管理器Vue Router使用方式（一）

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

来源：oschina

链接：https://my.oschina.net/u/2332115/blog/2248485

标签

vue-router

Vue.js