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,       //   }       // },     }   ] },