vue-router(学习笔记)

1.静态路由-写死不需要改变部分。
<template>
  <div>
   <banner/>
  </div>
<template>

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

-------------------------------------------

2.动态路由---由配置进行动态切换显示。

<router-link to="/about"> 跳转about组件，
 <router-view></router-view>指定组件的呈现位置

--------------------------------

3.query: 

Message.vue

<router-link :to="{
                    path:'/home/message/detail',
//路由命名:  name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }

                }">跳转到detail详情并且传递query参数内容
                </router-link>


detail.vue
 //获取query
<li>消息编号：{{$route.query.id}}</li>
<li>消息标题：{{$route.query.title}}</li>
----------------------------------------------

4.路由可通过props传递,
router/index.js

{
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,

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

                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            // props:true

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

                        }
                    ]
                }
deaail.vue

<template>
    <ul>
        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>
    </ul>
</template>
<script>
    export default {
        name:'Detail',
        props:['id','title'],
    }
</script>

备注：<router-link>若通过params传递，则需要使用name而不是path。