Vue2 第二十节 vue-router（二）

1.路由的query参数

2.命名路由

3.路由的params参数

4.路由的props配置

一.路由的query参数

① 跳转路由并携带参数

② 第一种写法：字符串写法

{{
          m.title
        }}

③ 第二种写法：对象写法

        {{ m.title }}

④ 取数据

 

    
消息编号：{{ $route.query.id }}
    
消息详情：{{ $route.query.title }}
  

⑤ 所有代码（这里只把相关的代码贴出来）

Message.vue

Detail.vue

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
            }
          ]
        }
      ]
    }
  ]
})

二.命名路由

①  给路由命名

② 简化路径，直接使用名字就可以了 

③ 相关代码

Message.vue

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
            }
          ]
        }
      ]
    }
  ]
})

三.路由的params参数

① 携带参数

② 写法一：字符串写法

{{
          m.title
        }}

使用这种方法必须在路由规则中写占位符

② 写法二：对象写法

params不允许使用path，只能使用name

 {{ m.title }}

④ 取数据

⑤ 相关代码

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', // 使用占位符声明并接收
              component: Detail
            }
          ]
        }
      ]
    }
  ]
})

Message.vue

Detail.vue

四.路由的props配置

（1） 第一种写法：对象写法

 ① 以props形式传过去

② 以props形式接收

（2）第二种写法： 值为bool值，如果bool值为真，就会把该路由组件收到的所有params参数，

  以props的形式传给Detail，只能解决params参数，处理不了query参数

 （3）第三种写法：值为函数，会自动传过来$route的参数

（4） 使用