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可以配置高亮样式)
      <!-- 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>
      
    • 指定展示位置
      <!-- 指定组件的呈现位置 -->
      <router-view></router-view>
      
  • 几个注意点
    • 路由组件通常存放在pages文件夹,,一般组件通常放在components文件夹中。
    • 通过切换,‘隐藏’的路由组件默认是被销毁的,需要的时候再去挂载
    • 每个组件都有自己的$route属性,里面存放自己的路由信息
    • 整个应用只有一个router,可以通过组件的$router属性获取
  • 多级路由
    • 配置路由规则,使用children配置项
      routes:[
        {
          path: '/home',
          component: Home,
          children: [
            {
              path: 'news',
              component: News,
            },
          ]
        },
      ]
      
    • 跳转(填写完整路径)
      <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
      
  • 路由的query参数
    • 传递参数
      <!-- 跳转路由并携带query参数,to的字符串写法 -->
      <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}&views=${m.views}`">{{m.title}}</router-link>
      <!-- 跳转路由并携带query参数,to的对象写法 -->
      <router-link :to="{
        path: '/home/message/detail',
        query: {
          id: m.id,
          title: m.title,
          views: m.views
        }
      }">
        {{m.title}}
      </router-link>
      
    • 接受参数:
      $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,
                  }
                ]
              },
            ]
          },
        ]
        
      • 简化跳转
        <!-- 简化前 -->
        <!-- 跳转路由并携带query参数,to的对象写法 -->
        <router-link :to="{
          path: '/home/message/detail',
          query: {
            id: m.id,
            title: m.title,
            views: m.views
          }
        }">
          {{m.title}}
        </router-link>
        <!-- 简化后 -->
        <!-- 跳转路由并携带query参数,to的对象写法 -->
        <router-link :to="{
          path: 'msg-d',
          query: {
            id: m.id,
            title: m.title,
            views: m.views
          }
        }">
          {{m.title}}
        </router-link>
        
  • 路由的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,
              }
            ]
          },
        ]
      },
      
    • 传递参数

      <!-- 跳转路由并携带query参数,to的字符串写法 -->
      <router-link :to="`/home/message/detail/${m.id}/${m.title}/${m.views}`">{{m.title}}</router-link>
      <!-- 跳转路由并携带query参数,to的对象写法 -->
      <router-link :to="{
        name: 'msg-d',    // 这种写法必须使用name配置
        params: {
          id: m.id,
          title: m.title,
          views: m.views
        }
      }">
        {{m.title}}
      </router-link>
      
    • 接受参数:

      $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,
          //   }
          // },
        }
      ]
    },
    
上一篇:如何用 sass 定义网站配色


下一篇:vue写路由遇到的坑