第十五节
15.1Mint UI
按照官方文档即可
// 引入全部组件
import Mint from 'mint-ui';
// 引入UI框架的样式
import 'mint-ui/lib/style.css'
Vue.use(Mint);15.2vue-router是什么
①vue-router是WebApp的链接路径管理系统。它和vue.js深度集成的，适合构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
②传统的页面应用是用超链接实现页面切换和跳转的，在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换，路由模块的本质就是建立起url和页面之间的映射关系。
15.2vue-router基本使用
15.2.1安装vue-router
npm install vue-router --save
15.2.2在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）
（一）导入路由对象，并且调用Vue.use(VueRouter)
//导入vue-router
import VueRouter from 'vue-router'
//安装插件 启用路由功能
Vue.use(VueRouter)（二）创建路由实例，并且传入路由映射配置[此处记：映射关系在前，实例在后]
//引用组件
import Home from './View/Home.vue'
import About from './View/About.vue'
//配置路径和组件的映射关系
const routes = [
{
path: '/home',//路由路径
component: Home//路由到的组件
},
{
path: '/about',//路由路径
component: About//路由到的组件
}
];
//创建路由实例 并且传入路由映射配置
const router = new VueRouter({
routes,//传入的路由配置
})（三）在Vue实例中挂载创建的路由实例
new Vue({
router,//将路由注入为vue对象
render: h => h(App),
}).$mount('#app')（四）在App.vue中div里渲染
<!-- 利用 router-view 进行显示路由渲染的组件,router-view切换的是挂载的组件,其他内容不会发发生改变 -->
<router-view></router-view>15.2.3router-link
<!-- tag可以指定router-link标签之后渲染成什么元素 -->
<!-- replace: 在history模式下指定router-link使用的是replaceState,而不是一个pushState,浏览器是不可以使用返回按钮 -->
<router-link to="/about" tag="button" replace>测试</router-link>active-class : 设置对应路由匹配成功时，会给当前元素设置一个active-class， 当被选中的时候就会有active-class属性设置的类名。
<router-link to="/about" active-class="myactive">关于</router-link>
也可以在路由中统一配置
const router =new VueRouter({
routes,//出入的路由配置数组对象（路由路径和组件之间对应的关系）
// 全局配置激活路由的class类名
linkActiveClass:"myactive"
})路由模式：
①hash:历史模式，不会制造页面刷新；②history：不会制造页面刷新，且没有不会有历史
第十六节
16.1动态路由
（一）创建单独的路由文件router/index.js
（二）在App.vue中
（三）在Home.vue中
<template>
<div id="home">
<h1>这是home主页</h1>
<h2>欢迎<span style="color:red;">{{uname}}</span>来到上海</h2>
<!-- 直接在模板中获取数据 -->
<h3>{{$route.params.id}}</h3>
</div>
</template>
<script>
export default {
computed:{
uname(){
return this.$route.params.id;
}
}
}
</script>
<style>
#home{
border: 2px solid red;
}
</style>16.2编程式导航
在vue中，我们除了实验创建a标签来定义导航链接之外，还可以使用router实例方法，通过编写代码的方式实现
16.3嵌套路由
嵌套路由是个常见的需求，假设用户能够通过路径/home/news和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。
两点要点：
1、在组件内部使用标签
2、在路由器对象中给组件定义子路由
第十七节
17.1vue-router路由传参
两种方式
（1）路由参数，通过定义动态路由传递参数【params】
（2）通过query来传递参数
17.2params类型
动态路由传参就是通过params进行传参；
动态路由params参数的路由定义格式/router/:id;
17.3query类型
17.4$route和$router是有区别的
$router为VueRouter实例，想要导航到不同URL,则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等17.5路由懒加载
用到的时候才开始加载：提高页面加载速度、避免进入页面加载全部页面；
17.6解决：重复点击路由的报错问题
方法1：在项目目录下运行 npm i vue-router@3.0 -S 重新下载未出错版本即可；
方法2：不想更换 vue-router 的版本亦可，在 main.js 或 router.js 中添加以下代码：
// 解决重复点击导航路由报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
}
17.7vue-router守卫
vue-router提供的导航守卫主要用来监听路由的进入和离开的。vue-router提供了beforeEach和afterEach的钩子函数。他们会在路由即将改变前和改变后触发。
