跳至主要内容

[Vue Router] 動態路由(params)

TL;DR​

動態路由使用axios取得randomuser api資料範例。

前置作業

範例會使用到Bootstrap的元件，所以需要先將Bootstrap給引入使用。

(引入Bootstrap參考)

參考資料​

相關連結​

axios安裝​

npm install axios --save

生命週期觸發​

在元件掛載時，透過生命週期，去取得目前頁面上路由的變數

DynamicRouter.vue​

在view資料夾內建立一個DynamicRouter.vue

./src/views/DynamicRouter.vue
<template>
  {{ user }}
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      user:""
    }
  },
  created(){
    let seedbyid=this.$route.params;
    axios.get(`https://randomuser.me/api/?seed=${seedbyid}`)
      .then((res)=>{
        this.user=res.data.results;
      })
  },
}
</script>

設定路由(routes)​

動態路由

要使用動態路由，需要在path中加入:paramsName。

其中的paramsName代表之後在取出時，會存放在this.$route.params內的屬性。

設定路由表如下：

./src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/newpage',
      name: '新增頁面',
      component: () => import('../views/NewPage.vue'),
      children: [
        {
          path: 'a',
          name: '新增頁面內的元件A',
          component: ()=> import('../components/ComponentA.vue')
        },
        {
          path: 'b',
          name: '新增頁面內的元件B',
          component: ()=> import('../components/ComponentB.vue')
        },
        {
          path: 'dynamicRouter/:id',
          component: ()=> import('@/views/DynamicRouter.vue')
        },
        ...
})

export default router

接著調整在NewPage.vue內的RouterLink，來將我們要加入的路由給加入

note

一般來說，並不會這樣直接使用RouterLink將路由給寫死

這邊寫死只是為了展示透過網址傳遞參數的一個範例

./src/views/NewPage.vue
<template>
  <div class="container">
    <div class="row py-3">
      <div class="col-3">
        <div class="list-group">
          <RouterLink :to="{name:'新增頁面內的元件A'}" class="list-group-item list-group-item-action" aria-current="true">
            元件A
          </RouterLink>
          <RouterLink to="/newpage/b" class="list-group-item list-group-item-action">
            元件B
          </RouterLink>
          <RouterLink to="/newpage/namedview/c2a" class="list-group-item list-group-item-action">
            C to A
          </RouterLink>
          <RouterLink to="/newpage/namedview/a2b" class="list-group-item list-group-item-action">
            A to B
          </RouterLink>
          // dynamicRouter後面的81...作為一個參數傳遞，並且透過this.$route.params.id取出
          <RouterLink to="/newpage/dynamicRouter/81a0b89d11fb45c2" class="list-group-item list-group-item-action">
            DynamicRouter
          </RouterLink>
        </div>
      </div>
      <div class="col-9">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

路由觸發​

另一種方式是透過每次進入該路由，就由路由觸發並傳入一個Props給該頁面。

DynamicRouterByProps.vue​

./src/views/DynamicRouterByProps.vue
<template>
  {{ user }}
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      user:""
    }
  },
  props:['id'],
  created(){
    console.log(this.id);
    const seedbyid=this.id;
    axios.get(`https://randomuser.me/api/?seed=${seedbyid}`)
      .then((res)=>{
        this.user=res.data.results;
      })
  },
}
</script>

設定路由(routes)​

固定值id​

./src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/newpage',
      name: '新增頁面',
      component: () => import('../views/NewPage.vue'),
      children: [
        {
          path: 'a',
          name: '新增頁面內的元件A',
          component: ()=> import('../components/ComponentA.vue')
        },
        {
          path: 'b',
          name: '新增頁面內的元件B',
          component: ()=> import('../components/ComponentB.vue')
        },
        {
          path: 'dynamicRouter/:id',
          component: ()=> import('@/views/DynamicRouter.vue')
        },
        {
          path: 'dynamicRouterByProps/:id',
          component: ()=> import('@/views/DynamicRouterByProps.vue'),
          props: () => ({
            id: '81a0b89d11fb45c2'
          })
        },
        ...
})

export default router

動態id​

前面直接寫入id為固定值的方式傳遞，如果今天需要使用網址動態改變props傳遞的id內容時，需要修改如下：

./src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/newpage',
      name: '新增頁面',
      component: () => import('../views/NewPage.vue'),
      children: [
        {
          path: 'a',
          name: '新增頁面內的元件A',
          component: ()=> import('../components/ComponentA.vue')
        },
        {
          path: 'b',
          name: '新增頁面內的元件B',
          component: ()=> import('../components/ComponentB.vue')
        },
        {
          path: 'dynamicRouter/:id',
          component: ()=> import('@/views/DynamicRouter.vue')
        },
        {
          path: 'dynamicRouterByProps/:id',
          component: ()=> import('@/views/DynamicRouterByProps.vue'),
          props: (route) => {
            console.log('route:',route);
            return {
              id: route.params.id
            }
          }
        },
        ...
})

export default router

./src/views/NewPage.vue
<template>
  <div class="container">
    <div class="row py-3">
      <div class="col-3">
        <div class="list-group">
          <RouterLink :to="{name:'新增頁面內的元件A'}" class="list-group-item list-group-item-action" aria-current="true">
            元件A
          </RouterLink>
          <RouterLink to="/newpage/b" class="list-group-item list-group-item-action">
            元件B
          </RouterLink>
          <RouterLink to="/newpage/namedview/c2a" class="list-group-item list-group-item-action">
            C to A
          </RouterLink>
          <RouterLink to="/newpage/namedview/a2b" class="list-group-item list-group-item-action">
            A to B
          </RouterLink>
          <RouterLink to="/newpage/dynamicRouter/81a0b89d11fb45c2" class="list-group-item list-group-item-action">
            DynamicRouter
          </RouterLink>
          <RouterLink to="/newpage/dynamicRouterByProps/81a0b89d11fb45c2" class="list-group-item list-group-item-action">
            DynamicRouter
          </RouterLink>
        </div>
      </div>
      <div class="col-9">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>