Vuejs學習筆記(三)-16.vue-router的基本使用-動態路由(父到路由,路由到子)
阿新 • • 發佈:2021-07-08
一、動態路由:
需求:希望頁面點選不同使用者名稱稱連結(父元件),進入不同使用者詳情的Url(路由),且在使用者詳情頁顯示不同的詳情資訊(子元件)
邏輯:父元件的使用者名稱稱userName(資料來源)-->將名稱傳給父元件的router-link(<router-link :to="‘/user/+userName’">使用者</router-link>)------>router/index.js中配置路由與元件的對映關係中有變數userName1---------->子元件檔案(User.vue)中使用當前活躍路由的屬性,$this.route.params.userName1------->使用計算屬性在頁面上展示 本質上:父元件將資料傳給路由,路由解析出變數在傳給子元件。 步驟1: 父元件程式碼:1步驟2:路由檔案中以冒號分割顯示接收父元件傳給路由的變數<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>
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3import 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