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

 

更多：

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

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

Element UI框架+Vue開發搭建示例