路由

理解：一个路由（route)就是一组映射关系（key:value)，多个路由需要路由器（router)进行管理。

前端路由：key是路径，value是组件

基本使用

1.安装vue-router，命令 npm i vue-router@3 适配vue2

2.应用插件

import VueRouter from 'vue-router'
// 应用插件
Vue.use(VueRouter)

3.编写router配置项(router/index.js)

// 此文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'

// 引入组件
import MyAbout from "../components/About"
import MyHome from "../components/Home"

// 创建并暴露一个路由器
export default new VueRouter({
    // 注意单词的拼写
    routes:[
        {
            path: '/about',
            // 或者 component:() => import('../src/views/Home.vue')
            // 引入组件时所起的变量名
            component: MyAbout
        },
        {
            path: '/home',
            component: MyHome
        }
    ]
})

4.在Vue配置项中配置 router

new Vue({
    el:'#app',
    render:h => h(App),
    router:router
})

5.实时切换(active-class标签可以配置高亮样式)

<!-- router-link -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>

6.指定组件展示的位置

<!-- 指定组件的呈现位置 -->
<router-view></router-view>

组件的分类

1. 路由组件
2. 一般组件

一般组件通常放在components文件夹下，路由组件通常放在pages文件夹下。

当路由组件不使用时，是被销毁了。

整个应用只有一个router，可以通过$router获取到。

路由的query参数

传递参数的两种写法

<li v-for="m in messageList" :key="m.id">
  <!-- 跳转路由并携带query参数，to的字符串写法 -->
  <!-- 表达式+模板字符串 -->
  <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`"></router-link
  >
  <!-- 跳转路由并携带query参数，to的对象写法 -->
  <router-link :to="{
    path:'/home/message/detail',
    query:{
      id:m.id,
      title:m.title
    }
  }">
  {{ m.title }}
  </router-link>
</li>

接收参数

<ul>
    <li>消息编号：{{$route.query.id}}</li>
    <li>消息标题：{{$route.query.title}}</li>
</ul>

路由组件的命名

适用于简化多级路径的写法

配置路由的时候加上name配置项

{
    name:'guanyu',
    path: '/about',
    component: About
},

使用时利用name属性使用

// 方式一
<router-link :to="{
    //路由组件的名称
    name:'xiangqing',
    query:{
    id:m.id,
    title:m.title
    }
    }">
    {{ m.title }}
</router-link>

// 方式二
// to加冒号，后面写对象写法
<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>

路由的params参数

1.配置路由，声明接收params参数

{
    path:'message',
    component: MyMessage,
    children:[
        {
            name:'xiangqing',
            path:'detail/:id/:title',
            component: MyDetail,
        }
    ]
},

2.传递参数

<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- 表达式+模板字符串 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
<!-- 跳转路由并携带 params参数，to的对象写法 -->
<!-- 如果写的是 params参数，这里不允许使用 path -->
<router-link :to="{
  //路由组件的名称
  name:'xiangqing',
  params:{
    id:m.id,
    title:m.title
  }
}">
{{ m.title }}
</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置项。

3.接收参数

<ul>
  <li>消息编号：{{$route.params.id}}</li>
  <li>消息标题：{{$route.params.title}}</li>
</ul>

路由的历史记录

router-link 的replace属性

1.作用：控制路由跳转时操作浏览器历史记录的模式

2.浏览器的历史记录有两种写入方式，分别为 push 和 replace ，push 是追加历史记录，replace 是替换历史记录。路由跳转时默认是 push ，可通过浏览器的前进和后退控制跳转。

3.如何开启 replace 模式，在 router-link 中加入replace属性即可。