vue2.0学习笔记（第九讲）（vue-router实现路由）

头像
倩儿爱甜食
    阅读 9 分钟
    1

    我们可以使用vue-router来实现路由，通过vue.js + vue-router可以实现SPA（单一页面应用程序），即可以根据不同的url地址请求在一个页面上呈现出不同的效果。详见vue2.0当中vue-router的 使用说明文档 。

    1、下载及引包

    在此我们同样通过bower来进行下载vue-router。我们在项目文件夹的目录下，打开cmd，键入命令-> bower install vue-router，下载完成之后，再通过<script src="bower_components/vue-router/dist/vue-router.min.js"></script>来完成引入。

    2、完成页面布局（html部分）

    我们在页面布局当中使用<router-link>标签来实现路由导航，通过传入to属性来指定链接，如写为<router-link to="/home">主页</router-link>。当我们完成完整的配置路由项的代码后，加载页面审查元素可以发现，上述标签对会被渲染为<a href="#/home">主页</a>，即当用户点击该a标签时，页面上对应的url地址由index.html变为index.html#/home。然后我们在安排路由展示的区域使用固定的标签对<router-view></router-view>来占位。当页面请求不同的url地址时，会根据我们的配置的路由项，把router-view替换成对应的组件在路由展示区域进行展示。

    3、配置路由项

    我们先在与var vm = new Vue({});实例并列的上方定义两个全局的组件对象Home和News。（组件名的首字母一般都大写）如下所示：

            var Home = {
            template:'<h2>主页页面内容</h2>'
        };
        var News = {
            template:'<h2>新闻页面内容</h2>'
        };

    然后同样在全局范围内进行路由的配置，我们在routes对应的数组当中，放置多个对象，每一个对象对应着一条路由信息。示例代码如下所示：

            const routes = [
            {path:'/home',component:Home},
            {path:'/news',component:News}
        ];

    即我们点击主页这个a标签时，在当前的index.html页面下对应的url地址变为index.html#/home，此时路由展示区域的标签对<router-view></router-view>会被替换为Home这个组件。

    接下去在全局范围内使用VueRouter来生成路由实例，使用变量router来接收。示例代码如下所示：

            const router = new VueRouter({
            routes:routes
        });

    等价于

            const router = new VueRouter({
            routes
        });

    最后在var vm = new Vue({});这个vue实例上，把刚刚生成的router这个路由实例挂载上去。示例代码如下所示：

            var vm = new Vue({
           el:'#box',
           router:router
        });

    等价写法为：

            var vm = new Vue({
           el:'#box',
           router
        });

    我们可以在配置路由信息的数组最后加上一条{path:'*',redirect:'/home'}即当之前所有的路由项都匹配不上时，则匹配上这条路由，页面重定向，等价于路径为'/home'，在路由展示区域同样显示Home这个组件。

    完整的示例代码如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
    <style>
        .router-link-active{
            color:#f40;
        }
    </style>
    <script>
        window.onload = function(){
            var Home = {
                template:'<h2>主页页面内容</h2>'
            };
            var News = {
                template:'<h2>新闻页面内容</h2>'
            };
            const routes = [
                {path:'/home',component:Home},
                {path:'/news',component:News},
                {path:'*',component:Home}
            ];
            const router = new VueRouter({
                routes
            });
            var vm = new Vue({
               el:'#box',
               router
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
</body>
</html>

    当页面加载完成后，显示为：

    图片描述

    当点击新闻这个链接时，显示的页面为：

    图片描述

    4、嵌套路由的设置

    我们可以在News这个组件的template模板当中再加入<router-link>路由导航与<router-view>路由展示区域。然后再在/news这条路由配置对象当中的children这个数组当中配置上的所有的子路由项。示例代码如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
    <style>
        .router-link-active{
            color:#f40;
        }
    </style>
    <script>
        window.onload = function(){
            var Home = {
                template:'<h2>主页页面内容</h2>'
            };
            var News = {
                template:'#aaa'
            };
            var Event = {
                template:'<p>今日新闻</p>'
            }
            const routes = [
                {path:'/home',component:Home},
                {path:'/news',component:News,children:[
                    {path:'event',component:Event}
                ]},
                {path:'*',component:Home}
            ];
            const router = new VueRouter({
                routes
            });
            var vm = new Vue({
               el:'#box',
               router
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <template id="aaa">
        <div>
            <h2>新闻页面内容</h2>
            <router-link to="/news/event">某条新闻</router-link>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </template>
</body>
</html>

    当我们在主页面当中点击新闻链接时，显示的页面为：

    图片描述

    当我们继续在该页面路径下点击某条新闻这一链接时，显示的页面为：

    图片描述

    5、获取路由路径当中的参数

    示例代码如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
    <style>
        .router-link-active{
            color:#f40;
        }
    </style>
    <script>
        window.onload = function(){
            var Home = {
                template:'<h2>主页页面内容</h2>'
            };
            var News = {
                template:'#aaa'
            };
            var Event = {
                template:'#bbb'
            }
            const routes = [
                {path:'/home',component:Home},
                {path:'/news',component:News,children:[
                    {path:'event/:address/date/:number',component:Event}
                ]},
                {path:'*',component:Home}
            ];
            const router = new VueRouter({
                routes
            });
            var vm = new Vue({
               el:'#box',
               router
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <template id="aaa">
        <div>
            <h2>新闻页面内容</h2>
            <router-link to="/news/event/zhejiang/date/10">浙江新闻</router-link>
            <router-link to="/news/event/chongqin/date/20">重庆新闻</router-link>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </template>
    <template id="bbb">
        <div>
            <h3>{{$route.params}}</h3>
            <h4>{{$route.params.address}}</h4>
            <h4>{{$route.params.number}}</h4>
        </div>
    </template>
</body>
</html>

    当我们点击新闻链接时，显示的页面为：

    图片描述

    在此新闻的页面下点击浙江新闻的链接，则在路由展示区域可以显示出该路由路径当中的相关参数，如下图所示：

    图片描述

    同理当在该页面下点击重庆新闻链接时，页面效果为：

    图片描述

    6、路由实例的两个方法

    之前在配置路由项的过程中，我们在全局范围内使用VueRouter来生成路由实例，并使用变量router来接收，之后我们再在var vm = new Vue({});这个vue实例上，把刚刚生成的router这个路由实例挂载上去。下面介绍的这两个路由实例的方法一般在vue实例内部的methods当中进行声明使用。

    其中router.push({path:'/home'});意为向历史记录当中添加一条路由地址记录，表现为切换路由，即从当前路径切换至/home这条路径上，相当于重定向。

    其中router.replace({path:'/home'});意为替换路由，也相当于重定向，但不会往历史记录当中添加记录，也不会刷新当前页面，仅仅只是替换了当前的url地址而已。示例代码如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
    <style>
        .router-link-active{
            color:#f40;
        }
    </style>
    <script>
        window.onload = function(){
            var Home = {
                template:'<h2>主页页面内容</h2>'
            };
            var News = {
                template:'<h2>新闻页面内容</h2>'
            };
            const routes = [
                {path:'/home',component:Home},
                {path:'/news',component:News},
                {path:'*',component:Home}
            ];
            const router = new VueRouter({
                routes
            });
            var vm = new Vue({
               el:'#box',
               router,
               methods:{
                  push:function(){
                     router.push({path:'/home'});
                  },
                  replace:function(){
                     router.replace({path:'/home'});
                  }
               }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>
        <button @click="push">push</button>
        <button @click="replace">replace</button>
        <div>
            <router-view></router-view>
        </div>
    </div>
</body>
</html>
    vue.jsvue-router
    倩儿爱甜食
    477 声望62 粉丝

    一切都是最好的安排 ^-^ !

    « 上一篇
    vue2.0学习笔记（第八讲）（vue-cli的使用）
    下一篇 »
    腾讯云服务器的环境配置与使用

    引用和评论

    推荐阅读
    头像
    前端自动化构建之Gulp的使用（学习笔记）

    倩儿爱甜食阅读 2.2k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 494评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 892

    0 条评论
    得票最新