Vue Router相关理解2

路由的query参数

传递参数

                
                

                
                
                {{ m.title }}
                

冒号to先转换成js语句，然后再使用模板字符串 

接收参数

$route.query.id
$route.query.title

案例

src/router/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: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            path: 'detail',
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue

src/pages/Detail.vue

命名路由

作用：可以简化路由的跳转

src/router/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
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue

params参数

src/router/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/:id/:title',  //使用占位符声明接收params参数
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Detail.vue

src/pages/Message.vue

特别注意：路由携带params参数，若使用to的对象写法，则不能使用path配置项，必须使用name配置

路由的props配置

src/route/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/:id/:title',  //使用占位符声明接收params参数
                            component: Detail,

                            //第一种写法：props值为对象，该对象中所有的key-value的组合都会通过props传给Detail组件
                            // props:{a:'100',b:'1'},
                            //第二种写法：props值为true，则把路由收到的所有params参数通过props传给Detail组件
                            // props:true,
                            //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
                            props($route){
                                return{
                                    id:$route.query.id,
                                    title:$route.query.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Detail.vue

src/pages/Message.vue