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参数，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参数

{
  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