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

1、路由定義添加動態參數定義

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

2、路由連接使用

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('/');

3、動態註冊路由、異步註冊路由

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

4、深刻路由動態配、通配符、正則表達式驗證

{
  // 會匹配全部路徑
  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開發搭建示例