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

89701933

2019-06-25

我们可以使用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>

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