vue全家桶之vue-router路由

vuejs 周边生态圈

vuejs 本身是有一个很小的框架。喜欢 vuejs 的人很多，这些组织在一起，形成了一个叫做第三方的社区，这些社区存在很多的技术大牛，然后使用 vuejs 做为基础的架构，衍生出来很多和 vuejs 相关的产品，我们称为 vuejs 全家桶。
vuejs全家桶（vuejs生态圈） = vuejs + vue-router(路由) + vue-cli(脚手架) + vuex(状态管理) + vue-devTools(调试工具) + ElementUI(页面组件库) + MintUI(页面组件库)…

查看vuejs全家桶

1，官网 https://cn.vuejs.org/
2， vuejs 的爱好者，把所有很好的 vuejs 相关的产品全部收集，形成一个 github 的项目。https://github.com/vuejs/awesome-vue
3，awesome-vue 中文版https://blog.csdn.net/caijunfen/article/details/78216868

vue-router 路由

前置条件

传统的网页开发，页面的跳转都是通过a链接实现，如果这种传统的项目在普通的 pc 显示是没有任何问题的。如果是这样的网页在手机端打开，由于手机屏幕相对很小，传统的网页的a链接跳转用户体验很差。手机端app跳转的体验还是很好的，app里面的很多的部分不会变化的，只会局部的变化（手机 app 经典布局：上有天、下有地、中间有内容，只是中间的内容局部的刷新变化）。能不能使用一些技术可以把传统的网页的用户体验开发成类似app的体验。（说白了就是把a链接的跳转模式改成手机端app的局部的跳转刷新）
一般我们可以使用 hash 监听进行实现。

ajax 也可以实现局部的刷新，也可以达到类似 app 体验（问题： 1. ajax是没有历史记录）

ajax和hash区别

ajax是没有历史记录
hash（页面的锚点：实现本页面的跳转）1. hash 不会导致页面的刷新 2. hash 存在历史记录（histroy 前进后退）

SPA 应用

使用 hash 这种技术实现的页面的局部刷新形成的网页应用，我们一般叫做 SPA 应用（signal page application 单页应用）我们网页里面的所有的功能都是在一个页面进行完成的。

为什么目前会比较流行 spa 应用？

主要是原因是现在是移动互联网时代，用户的显示的网页的设备都是小屏幕进行页面的呈现，为了更好的用户体验，需要把网页开发成类似 app 的用户体验，则我们就需要使用 hash 技术，实现局部的刷新，形成一个单页应用。

常见的单页应用有哪些，或者说 哪些场景使用做 SPA 应用？

网易云音乐、teambition、worktile；一般来说这些管理系统使用做成SPA应用，一些比较注重用户体验的应用。

vue-router

1. vue-router 是什么？

答：vue-router 是用于在 vuejs 的项目里面完成单页开发。vue-router 是第三方社区进行开发和维护，也是属于vuejs全家桶一员。

2. 为什么要使用它？

答：使用它做单页开发，单页开发用户体验很好。

3. 如何使用它？

借助官方的文档。 https://router.vuejs.org/zh/

vue-router 的基本使用

1. vue-router 也是一个npm管理的一个包，用于提供路由。

2. 什么是路由（路由器）？

vue-router 开发单页应用的时候，所有的功能都是在一个页面进行完成的，那么需要不同的时候显示不同的页面信息，我们把这种行为称为路由。

A功能: 显示A相关的页面
B功能：显示B相关的页面

换成代码：就是好比点击某个A连接的时候，显示A组件。点击B连接的时候，展示的B组件，我们称之为路由。定义显示的规则我们称之为 路由映射（路由表）。

完成一个单页开发有5步

1，定义待显示的组件

 var Home = {
            template: `
                <div>
                <h1>Home 组件</h1>
				</div>
            `

        };

    var News = {
        template: `
                <div>
                <h1>News 组件</h1>
			</div>
            `

    };

    var About = {
        template: `
                <div>
                <h1>About 组件</h1>
				</div>
            `

    };

2，定义一个路由映射关系

var routes = [
        
        // 详细的配置规则
        {path: '/home', component: Home, name: 'home'},
        {path: '/news', component: News, name: 'news'},
        {path: '/about', component: About, name: 'about'},
    ]

22()默认显示一个页面

// 默认的访问的时候，默认显示的组件 #/
        {path: '', component: Home, name: 'index'},

3，用vue-router.js提供一个全局函数，实例化一个路由器

// router r 存在 路由器
    var router = new VueRouter({
        // routes: routes
        routes,
    }); // 实例化一个路由器，参数：是对象 routes 属性，属性值就是上面定义的路由映射表

  

4. 把路由器注册到 根组件Vue里面

    var vm = new Vue({
        el: '#box',
        data: {
            title: 'hi vuejs!',

        },
        //路由器的注册 现在的应用就是一个SPA的应用了。
        // router: router
        // 简化写法，需要注意：变量的名称必须和属性的名称完全的一致
        router
    });

5. 设置SPA应用显示组件的位置
   router-view 是 vue-router.js 提供一个容器组件，用于显示 路由映射表里面 component 对对应的组件

 <router-view></router-view>

6，完成以上操作，spa已经配置成功了
为什么还看不到页面，主要的原因是没有正确的告诉 vue-router 路由的规则该使用哪一个？
（1）router-link 组件内部存在一个 to 属性，代表跳转的位置，属性的值和 routes 映射表里面的 path 相对应， to的属性值不要加上 #
（2） router-link

1. 可以把我们写的内容转换为 a连接，并且也是使用的锚点跳转
2. 会给当前以后点击的这个选项增加两个类名： router-link-exact-active router-link-active 一般给 router-link-active 这个类名定义一个默认的active的样式

（3）. 允许用户更改router-link的默认转换行为（默认转换为a连接）

<ul>
        <li><router-link to="/home" tag="button">首页</router-link></li>
        <li><router-link to="/news" tag="button">新闻</router-link></li>
        <li><router-link to="/about" tag="button">关于</router-link></li>
    </ul>

（3.1）需求：用户点击某个选项，使用当前的项是高亮的状态 active，因为默认添加的类名是 router-link-exact-active， router-link-active所以我们在实例化路由处更改一下

 // 自定义高亮的类名
        linkActiveClass: 'active',

（3.2）需求2：默认显示一个页面，在routes中设置默认路由

// 默认的访问的时候，默认显示的组件 #/
{path: '', component: Home, name: 'index'},

路由参数

1，定义一个待显示的组件
$route 这个模型变量，是vue-router.js 帮我们封装的，在组件实例对象里面就存在 代表和路由向的信息，我们可以 $route.params 获取动态路由的相关的参数 .id代表在定义路由规则时候的动态路由参数的名称

var Detail={
        template:`
<div>
    <h2>  详情-ID- {{ $route.params.id }} - {{ $route.params.type }}   </h2>
    <div>DetailDetailDetailDetailDetailLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aliquid deserunt exercitationem illum in ipsam iusto odit repellat sed? Maiores porro recusandae rerum tempora voluptates? Fugiat minus pariatur quibusdam?</div>
</div>
`

    }

2.在router中定义一个路由映射关系

{path:'/recommend',component:Recommend,name:'recommend',children:[
                {path:'detail/:id/:type',component:Detail,name:'detail'},
            ]}

3，在父组件里要显示的地方设置锚点

var Recommend={
        template:`
<div>
    <div>recommendrecommendrecommendLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aliquid deserunt exercitationem illum in ipsam iusto odit repellat sed? Maiores porro recusandae rerum tempora voluptates? Fugiat minus pariatur quibusdam?</div>
    <ul>
    <li><a href="#/recommend/detail/1/yule">推荐一娱乐</a></li>
    <li><a href="#/recommend/detail/2/hh">推荐二哈哈</a></li>
    <li><a href="#/recommend/detail/3/yeye">推荐三爷爷</a></li>
</ul>
<router-view></router-view>
</div>
`

路由分类

1，声明式路由： 使用路由表定义的路由关系。
路由表里面定义好多条路由规则（访问页面的某个功能的时候，显示与之对应的组件） path 代表用户访问path对应的功能的时候，展示 component对应的Home组件，并且为该规则取一个名称（该名称在路由表里面具有唯一性）

 var routes = [
        // 默认的访问的时候，默认显示的组件 #/
        {path: '', component: Home, name: 'index'},
        ]

2，编程式路由（编程式导航）
写在其中一个待显示的组件里面

  var About = {
        methods:{
            goBack: function () {
                // 使用的编程式导航，编程式的路由，可以使用编程的方式去进行页面的跳转
                // /home 对于的页面
                // this.$router 使用 vue-router.js 后，扩充的一个 api 可以完成路由相关的操作，里面跳转功能
                // 路由参数：$route.params.名称
                // this.$router.push('/home');
                // push 里面的字符串参数就是在 路由映射表里面的定义的路由规则里面的 path
                // this.$router.push('/news');
                // this.$router.back();
                // 后退一步，用户是从哪一个页面来的话，然后执行back回到来的地方  history.back();
                this.$router.go(-1); // history 正数向前；负数向后

            }

        },