VueRouter用法全面整理 -- 動態路由匹配

 在路徑哪裏匹配一個“：”冒號就可以了

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import autoRouter from '@/components/autoRoter'

Vue.use(Router)

const user = {
  template: '<div>內部的模板<div>'
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path: '/:id',   //加一個":"冒號就可以匹配，如 /abc ，/def等  ,但是無法匹配到/abc/def
      name: 'autoRouter',
      component: user
    }
  ]
})

參數值會被設置到 this.$route.params

 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  mounted(){
    console.log(this.$route.params.id)   // 可以打印出來  qwecfvxcv
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>