一、動態路由：

需求：希望頁面點選不同使用者名稱稱連結（父元件），進入不同使用者詳情的Url（路由），且在使用者詳情頁顯示不同的詳情資訊（子元件）

邏輯：父元件的使用者名稱稱userName（資料來源）-->將名稱傳給父元件的router-link(<router-link :to="‘/user/+userName’">使用者</router-link>)------>router/index.js中配置路由與元件的對映關係中有變數userName1---------->子元件檔案(User.vue)中使用當前活躍路由的屬性，$this.route.params.userName1------->使用計算屬性在頁面上展示 本質上：父元件將資料傳給路由，路由解析出變數在傳給子元件。 步驟1： 父元件程式碼：

 1
 
 <template>
 2   <div>
 3     <router-link to="/home" replace>首頁</router-link>
 4     <router-link to="/about" replace>關於</router-link>
 5     <router-link :to="'/user/'+userName" replace>使用者</router-link>
 6     <router-view></router-view>
 7   </div>
 8
 
 </template>
 9 
10 <script>
11 
12 export default {
13   name: 'App',
14   data(){
15     return{
16       userName:'invoker'
17     }
18   }
19 
20 }
21 </script>
22 
23 <style>
24 
25 </style>

步驟2：路由檔案中以冒號分割顯示接收父元件傳給路由的變數

 1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
 3
 
 import Home from '../components/Home'
 4 import About from '../components/About'
 5 import User from '../components/User'
 6 
 7 Vue.use(VueRouter)
 8 
 9 const routes = [
10   {
11     path: '',
12     redirect: '/home'
13   },
14   {
15     path: '/home',
16     component: Home
17   },
18   {
19     path: '/about',
20     component: About
21   },
22   {
23     path: '/user/:userName1',
24     component: User
25   }
26 ]
27 
28 const router = new VueRouter({
29   routes,
30   mode:'history'
31 })
32 
33 export default router

步驟3：子元件引用當前活躍路由的地址。this.$route.params.userName1

 1 <template>
 2   <h2>我叫{{userName2}}</h2>
 3 </template>
 4 
 5 <script>
 6 export default {
 7   name: "User",
 8   computed:{
 9     userName2(){
10       return this.$route.params.userName1
11     }
12   }
13 }
14 </script>
15 
16 <style scoped>
17 
18 </style>

4.子元件通過計算屬性展示路由處得到的變數值

本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/14985808.html