vue2进阶篇：vue-router之路由的props配置_vue.js

文章目录

  • ​​10.8路由的props配置​​
  • ​​案例：将案例改为“路由的props配置”​​
  • ​​完整代码​​
  • ​​本人其他相关文章链接​​

10.8路由的props配置

vue2进阶篇：vue-router之路由的props配置_路由的props配置_02


注意点1：

问题：props配置干啥用的？

答案：类似组件的props配置作用，组件的props用户父组件向子组件传递参数；而路由中props配置为了更方便的给路由组件传递参数。比如“案例-路由的params参数”中Detail组件中书写重复，请看如图1，那如果我有100个属性，难道要重复写100个{{KaTeX parse error: Expected 'EOF', got '}' at position 16: route.params.xx}̲}，明显route.params重复写的太多了；而使用props配置就精简许多了，如图2

vue2进阶篇：vue-router之路由的props配置_vue.js_03

图1


vue2进阶篇：vue-router之路由的props配置_vue.js_04

图2


注意点2：
路由规则配置中，props参数的使用有如下三种方式：
1.props值是一个对象。
2.props值是一个布尔值。
3.props值是一个函数。

注意点3：如果使用props配置true的方法，那么传参必须使用params方式才奏效（注意如果是query参数不会奏效的）

注意点4：
最好路由组件接收传递过来的参数使用this.$route.query.xx，不建议使用props:[‘id’,‘title’]，因为父子组建传参就是使用props的，如果路由组件使用props配置的话，一方面容易混淆不知道是父子组建还是路由组件传参，如果非要用建议加前缀标识符来区别父子组件传参和路由传参，另一方面容易导致父子组建传参和路由传参重名的问题。

案例：将案例改为“路由的props配置”

完整代码

完整项目路径

vue2进阶篇：vue-router之路由的props配置_路由的props配置_05

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
  el:'#app',
  render: h => h(App),
  router:router
})

App.vue

<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

          <!-- Vue中借助router-link标签实现路由的切换 -->
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Banner from './components/Banner'
  export default {
    name:'App',
    components:{Banner}
  }
</script>

index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
  routes:[
    {
      name:'guanyu',
      path:'/about',
      component:About
    },
    {
      path:'/home',
      component:Home,
      children:[
        {
          path:'news',
          component:News,
        },
        {
          path:'message',
          component:Message,
          children:[
            {
              name:'xiangqing',
              path:'detail',
              component:Detail,

              //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
              // props:{a:1,b:'hello'}

              //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数(注意如果是query参数不会奏效的)，以props的形式传给Detail组件。
              // props:true

              //props的第三种写法，值为函数
              props($route){
                return {
                  id:$route.query.id,
                  title:$route.query.title,           
                }
              }

            }
          ]
        }
      ]
    }
  ]
})

About.vue

<template>
  <h2>我是About的内容</h2>
</template>

<script>
  export default {
    name:'About',
    /* beforeDestroy() {
      console.log('About组件即将被销毁了')
    },*/
    /* mounted() {
      console.log('About组件挂载完毕了',this)
      window.aboutRoute = this.$route
      window.aboutRouter = this.$router
    },  */
  }
</script>

Home.vue

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
        </li>
      </ul>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name:'Home',
    /* beforeDestroy() {
      console.log('Home组件即将被销毁了')
    }, */
    /* mounted() {
      console.log('Home组件挂载完毕了',this)
      window.homeRoute = this.$route
      window.homeRouter = this.$router
    },  */
  }
</script>

News.vue

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

<script>
  export default {
    name:'News'
  }
</script>

Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带params参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>   -->

        <!-- 跳转路由并携带params参数，to的对象写法 -->
        <router-link :to="{
          name:'xiangqing',
          query:{
            id:m.id,
            title:m.title
          }
        }">
          {{m.title}}
        </router-link>
      
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name:'Message',
    data() {
      return {
        messageList:[
          {id:'001',title:'消息001'},
          {id:'002',title:'消息002'},
          {id:'003',title:'消息003'}
        ]
      }
    },
  }
</script>

Detail.vue

<template>
  <ul>
    <li>消息编号：{{id}}</li>
    <li>消息标题：{{title}}</li>
  </ul>
</template>

<script>
  export default {
    name:'Detail',
    props:['id','title'],
    computed: {
      // id(){
      //  return this.$route.query.id
      // },
      // title(){
      //  return this.$route.query.title
      // },
    },
    mounted() {
      // console.log(this.$route)
    },
  }
</script>

Banner.vue

<template>
  <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header"><h2>Vue Router Demo</h2></div>
  </div>
</template>

<script>
  export default {
    name:'Banner'
  }
</script>

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--  引入第三方样式-->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <!--  配置网页标题-->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

bootstrap.css网上搜一个拷贝进来，这个上前行代码就不拷贝过来了

结果展示：

vue2进阶篇：vue-router之路由的props配置_路由的props配置_06