Vue2渐进式框架（五）路由

第十五节

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路由元信息meta

16.4嵌套路由

嵌套路由是个常见的需求，假设用户能够通过路径/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的钩子函数。他们会在路由即将改变前和改变后触发。

上一节: Vue2渐进式框架（四）脚手架/项目创建/Vant/Element框架使用
下一节: Vue2渐进式框架（六）Axios专题、服务器搭建