第6章：vue-router
@[TOC]
6.1 相关理解
判定只有在某页面下显示该路由组件，配置meta
6.1.1 vue-router 的理解
vue的一个插件库，专门用来实现 SPA 应用
SPA：单页面应用，实现所有操作均在一个 HTML 页面中进行展示，动态化，模块化思想
6.1.2 对SPA应用的理解
- 单页Web应用（single page web application，SPA）。
- 整个应用只有一个完整的页面（index.html）。
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
- 数据需要通过 ajax 请求获取。
6.1.3 路由的理解
1. 什么是路由？
- 一个路由就是一组映射关系（key - value）
- key 为路径， value 可能是 function 或 component
2.路由分类
- 后端路由：
1）理解：value是 function，用于处理客户端提交的请求。
2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。 - 前端路由：
1）理解：value 是 component，用于展示页面内容。
2）工作过程：当浏览器的路径改变时，对应的组件就会显示。
路由，根据你的路径由我选择展示的组件内容，其实就是一组映射关系。6.2 基本路由
1、基本使用
- 安装
vue-router，命令npm i vue-router@3
注意：vue-router4——vue3，vue-router3——vue2 main.js文件中应用插件：Vue.use(VueRouter)
// 引入 Vue
import Vue from 'vue'
// 引入 APP
import App from './App.vue'
// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'
// 关闭 Vue 的生产提示
Vue.config.productionTip = false
// 应用插件
Vue.use(VueRouter)
// 创建 vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this
},
router:router
})
- 编写router配置项：
src\router\index.js该文件专门用于创建整个应用的路由器
- 实现切换（active-class可配资高亮样式）：router-link
<router-link active-class="active" to="/about"> About </router-link>
- 指定展示位置：router-view
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
几个注意点：
- 路由组件通常放在
pages文件夹，一般组件通常放在components文件夹。 - 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
- 每个组件都有自己的
$route属性，里面存储着自己的路由信息。 - 整个应用只有一个
router，可以通过组件的$router属性获取到。
6.3 嵌套（多级）路由
1、配置路由规则，router\index.js中使用children配置项
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
// 创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[ // 通过children配置子路由
{
path:'news', // 此处一定不要写：/news
component:News
},
{
path:'message', // 此处一定不要写：/message
component:Message,
children:[
{
name:'detail',
path:'detail',
component:Detail
}
]
}
]
}
]
})
2、跳转（要写完整路径）：<router-link active-class="active" to="/home/news">News</router-link>
6.4 路由传参
1、路由的query参数
拿数据时需要在
Detail.vue组件中使用$route.query.id2、路由的params参数
2.1、配置路由
2.2、传递参数
2.3、接受参数
特别注意：路由携带
params参数时，若用到to的对象写法，则不能使用path配置项，必须使用name配置项6.5 命名路由
1、作用：可以简化路由的跳转
2、如何使用
- 给路由命名
- 简化跳转
6.6、路由的props配置
作用：让路有组件更加方便的收到参数1、
router\index.js中配置props2、
Message.vue中传递props
3、Detail.vue中使用props
6.7 <router-link>的replace属性
1、作用：控制路由跳转时操作浏览器历史记录的模式
2、浏览器的历史记录有两种写入方式
分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3、如何开启replace模式
<router-link replace >News<router-link/>
