Vue的路由使用及参数接受

路由的基本使用

• 介绍
  • 理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。
  • 前端路由：key是路径，value是组件
• 基本使用
  • 安装vue-router，命令：npm install --save vue-router
  • 应用插件：Vue.use(VueRouter)
  • 编写router配置项：

    // 该文件专门用于创建整个应用的路由器
    import VueRouter from "vue-router";
    import About from '../components/About';
    import Home from '../components/Home';
    export default new VueRouter({
      routes:[
        {
          path: '/about',
          component: About,
        },
        {
          path: '/home',
          component: Home,
        },
      ]
    })
    

  • 实现切换（active-class可以配置高亮样式）

    
    About
    Home
    

  • 指定展示位置

• 几个注意点
  • 路由组件通常存放在pages文件夹，，一般组件通常放在components文件夹中。
  • 通过切换，‘隐藏’的路由组件默认是被销毁的，需要的时候再去挂载
  • 每个组件都有自己的$route属性，里面存放自己的路由信息
  • 整个应用只有一个router，可以通过组件的$router属性获取
• 多级路由
  • 配置路由规则，使用children配置项

    routes:[
      {
        path: '/home',
        component: Home,
        children: [
          {
            path: 'news',
            component: News,
          },
        ]
      },
    ]
    

  • 跳转（填写完整路径）

    News
    

• 路由的query参数
  • 传递参数

    
    {{m.title}}
    
    
      {{m.title}}
    
    

  • 接受参数：

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

• 命名路由
  • 作用：可以简化路由的跳转
  • 如何使用：
    • 给路由命名

      routes:[
        {
          path: '/home',
          component: Home,
          children: [
            {
              path: 'message',
              component: Message,
              children: [
                {
                  name: 'msg-d',
                  path: 'detail',
                  component: Detail,
                }
              ]
            },
          ]
        },
      ]
      

    • 简化跳转

      
      
      
        {{m.title}}
      
      
      
      
        {{m.title}}
      
      

• 路由的params参数

  • 配置路由：声明接受params参数

    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news',
          component: News,
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              name: 'msg-d',
              path: 'detail/:id/:title/:views',   // 使用占位符接受params参数
              component: Detail,
            }
          ]
        },
      ]
    },
    

  • 传递参数

    
    {{m.title}}
    
    
      {{m.title}}
    
    

  • 接受参数：

    $route.params.id
    $route.params.title
    $route.params.views
    

路由的props配置

• 作用：让路由组件更方便的收到参数（query、params）

  {
    path: 'message',
    component: Message,
    children: [
      {
        name: 'msg-d',
        path: 'detail/:id/:title/:views',
        component: Detail,
        // props的第一种写法，值为对象。该对象的所有key-value都会以props的形式传给当前组件中
        props: {a:1, b:2},  // 固定值
        // props的第二种写法，值为boolean。就会把该路由组件收到的所有params参数，以props的形式传给当前组件中，即在组件中配置props属性接受键值
        // props:true,
        // props的第三种写法，值为function。就会把该路由组件收到的所有params参数，以props的形式传给当前组件中，即在组件中配置props属性接受键值
        props($route) {
          return {
            id: $route.params.id,
            title: $route.params.title,
            views: $route.params.views,
          }
        },
        // props({params:{id, title, views}}) {   // 不推荐，不易于理解
        //   return {
        //     id, title, views,
        //   }
        // },
      }
    ]
  },