Vuejs学习笔记(三)-16.vue-router的基本使用-参数化（params）-动态路由（父到路由，路由到子）

一、动态路由：

需求：希望页面点击不同用户名称链接（父组件），进入不同用户详情的Url（路由），且在用户详情页显示不同的详情信息（子组件）

逻辑：父组件的用户名称userName（数据源）-->将名称传给父组件的router-link(<router-link :to="‘/user/+userName’">用户</router-link>)------>router/index.js中配置路由与组件的映射关系中有变量userName1---------->子组件文件(User.vue)中使用当前活跃路由的属性，$this.route.params.userName1------->使用计算属性在页面上展示

 

本质上：父组件将数据传给路由，路由解析出变量在传给子组件。

 

步骤1：

父组件代码：

App.vue

<template>
  <div>
    <router-link to="/home" replace>首页</router-link>
    <router-link to="/about" replace>关于</router-link>
    <router-link :to="'/user/'+userName" replace>用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      userName:'invoker'
    }
  }

}
</script>

<style>

</style>

 

 

 

步骤2：路由文件中以冒号分割显示接收父组件传给路由的变量

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'

Vue.use(VueRouter)

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userName1',
    component: User
  }
]

const router = new VueRouter({
  routes,
  mode:'history'
})

export default router

 

 

 步骤3：子组件引用当前活跃路由的地址。this.$route.params.userName1

User.vue

<template>
  <h2>我叫{{userName2}}</h2>
</template>

<script>
export default {
  name: "User",
  computed:{
    userName2(){
      return this.$route.params.userName1
    }
  }
}
</script>

<style scoped>

</style>

 

4.子组件通过计算属性展示路由处得到的变量值