《vue2进阶篇：路由》第10章：vue-router，包括基础路由、嵌套路由、路由的query参数和params参数、命名路由

头像头饰
刘大猫
     黑龙江
    阅读 8 分钟

    image.png
    @[toc]

    vue-router

    一、普通html使用“路由”

    随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。
    <font color='red'>SEO：</font>一般指搜索引擎优化。

    优点：
1、用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，界面展现快。
2、可以再浏览器中输入指定想要访问的url路径地址。
3、实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。
缺点：
1、对SEO不是很友好
2、在浏览器前进和后退时候重新发送请求，没有合理缓存数据。
3、初始加载时候由于加载所有模块渲染，会慢一点。

    1)手动实现路由

    前端路由目前主要有两种方法：
    1）利用url的hash,就是常用的锚点（#）操作，类似页面中点击某小图标，返回页面顶部，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询进行实现。一般常用框架的路由机制都是用的这种方法，例如Angualrjs自带的ngRoute和二次开发模块ui-router，react的react-route,vue-route…
    2）利用HTML5的History模式，使url看起来类似普通网站，以”/”分割，没有”#”，但页面并没有跳转，不过使用这种模式需要服务器端的支持，服务器在接收到所有的请求后，都指向同一个html文件，通过historyAPI，监听popState事件，用pushState和replaceState来实现。

    由于使用hash方法能够兼容低版本的IE浏览器，简单的的自己搭建前端路由。

    举例：实现点击不同标签跳转不同页

    <font color='red'>说明：</font>
    <font color='red'>第一步：</font>定义函数
    <font color='red'>第二步：</font>定义路由切换
    <font color='red'>第三步：</font>定义dom配置#地址
    <font color='red'>执行流程：</font>点击a标签 =》 根据#后面的路径调用路由切换Router.route =》 调用具体方法changePage()

    案例代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义路由</title>
    <script>
        function Router() {
            this.routes = {};
            this.currentUrl = '';
        }
        //route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新
        Router.prototype.route = function (path, callback) {
            this.routes[path] = callback || function () { };
        };
        //refresh 执行当前url对应的回调函数，更新页面
        Router.prototype.refresh = function () {
            this.currentUrl = location.hash.slice(1) || '/';
            this.routes[this.currentUrl]();
        };
        //init 监听浏览器 url hash 更新事件
        Router.prototype.init = function () {
            //load事件在当前页面加载时触发
            window.addEventListener('load', this.refresh.bind(this), false);
            //hashchange事件在当前页面URL中的hash值发生改变时触发
            window.addEventListener('hashchange', this.refresh.bind(this), false);
        };
        window.Router = new Router();
        window.Router.init();
    </script>
    <title></title>
</head>
<body>
<ul>
    <li><a href="#/">首页</a></li>
    <li><a href="#/home">主页</a></li>
    <li><a href="#/detail">详情页</a></li>
</ul>
<div id="page"></div>
<script>
    var body = document.querySelector('body');
    //切换hash的事件
    function changePage(page) {
        document.querySelector('#page').innerHTML = page;
    }
    //切换
    Router.route('/', function () {
        changePage('这是首页');
    });
    Router.route('/home', function () {
        changePage('这是主页');
    });
    Router.route('/detail', function () {
        changePage('这是详情页');
    });
</script>
</body>
</html>
    结果展示

    image.png

    2 )vue-router

    vue-router是Vue官方提供的路由，用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

    <font color='red'>使用说明：</font>

    1. 引入vue.js和vue-router.js，且引入位置vue.js必须在vue-router.js上面加载
    2. 定义（路由）组件。
    3. 定义路由映射关系
    4. 创建 router 实例
    5. 创建vue实例并挂载router

    6. 使用 router-link 组件，最后一定要配置路由出口\<router-view>

      举例：使用vue-route实现导航跳转
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <script src="../vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h3>Hello App!</h3>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/index">Go to index</router-link>
        <router-link to="/news">Go to news</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Index = { template: '<div>首页</div>' }
    const News = { template: '<div>新闻页</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        { path: '/index', component: Index },
        { path: '/news', component: News }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app');
    // 现在，应用已经启动了！
</script>
</body>
</html>
    结果展示

    image.png

    3)参数路由

    通过路由可以传递参数，在使用时用:参数名的形式定义路由参数
    通过<font color='red'>$route.params</font>获取路由参数：<font color='red'>/user/12</font>
    通过<font color='red'>$route.query</font>获取问号？后面查询参数：<font color='red'>name=cat</font>

    举例：路由传参并实现打印输出
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <script src="../vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h3>Hello App!</h3>
    <p>
        <router-link to="/user/12?name=cat">User12</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    // 1. 定义（路由）组件。
    const User = { template: '<div>用户: {{ $route.params.id }}-{{ $route.query.name }}</div>' };

    // 2. 定义动态路由
    const routes = [
        // 动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
    ];

    // 3. 创建 router 实例
    const router = new VueRouter({
        routes
    });
    // 4. 创建和挂载根实例
    const app = new Vue({
        router
    }).$mount('#app');
    // 现在，应用已经启动了！
</script>
</body>
</html>
    结果展示

    image.png

    二、脚手架创建vue项目使用“路由”

    相关理解

    10.1.1vue-router的理解

    vue 的一个插件库，专门用来实现 SPA 应用

    10.1.2对SPA应用的理解
    1. 单页 Web 应用（<font color='red'>single page web application，SPA</font>）。
    2. 整个应用只有<font color='red'>一个完整的页面</font>。
    3. 点击页面中的导航链接<font color='red'>不会刷新页面</font>，只会做页面的<font color='red'>局部更新</font>。
    4. 数据需要通过 ajax 请求获取。
    10.1.3 路由的理解

    image.png
    image.png
    image.png
    image.png

    1. 什么是路由
    1. 一个路由就是一组映射关系（key - value） ，多个路由需要路由器（router）进行管理。
    2. key 为路径, value 可能是 function 或 component

    image.png

    2. 路由分类
    1.后端路由：

    1) 理解：value 是 function, 用于处理客户端提交的请求。
    2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

    2.前端路由：

    1) 理解：value 是 component，用于展示页面内容。
    2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

    本人其他相关文章链接

    1.《vue2进阶篇：路由》第10章：vue-router，包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件
    2.vue2进阶篇：安装路由
    3.vue2进阶篇：vue-router之基础路由
    4.vue2进阶篇：vue-router之嵌套（多级）路由
    5.vue2进阶篇：vue-router之路由的query参数
    6.vue2进阶篇：vue-router之命名路由
    7.vue2进阶篇：vue-router之路由的params参数
    8.vue2进阶篇：vue-router之路由的props配置
    9.vue2进阶篇：vue-router之router-link的replace属性
    10.vue2进阶篇：vue-router之编程式路由导航
    11.vue2进阶篇：vue-router之缓存路由组件
    12.vue2进阶篇：vue-router之两个新的生命周期钩子
    13.vue2进阶篇：vue-router之使用“全局路由守卫”
    14.vue2进阶篇：vue-router之“使用独享路由守卫”
    15.vue2进阶篇：vue-router之“使用组件内路由守卫”
    16.vue2进阶篇：vue-router之路由的2种工作模式

    前端vue.jsvue2路由vue-router
    刘大猫
    1 声望1 粉丝

    如果有天突然发现路的尽头还是路的话，希望你还没错过太多沿路的风景和眼前珍惜的人。

    « 上一篇
    vue2进阶篇：安装路由
    下一篇 »
    vue2知识点：vuex中四个map方法的使用，包括：mapState、mapGetters、mapMutations

    引用和评论

    推荐阅读
    头像
    单链表题+数组题（快慢指针和左右指针）

    刘大猫阅读 9

    头像
    CSS团队协作规范

    寒青赞 35阅读 3k

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 1.5k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.8k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.7k

    0 条评论
    得票最新