Vue中的vue-router

左手的ㄟ右手 2022-04-22 11:10 272阅读 0赞

### 文章目录 ###

*  官网
 *  vue-router的使用
 *   *  源码
     *  结果
     *  分析

*  作用：

在一个系统中往往会有很多的页面组成，在`Vue`开发中，这些页面通常使用的是`Vue`中的组件来实现的。

当一个页面跳转到另一个页面时，其是通过改变`url`路径来实现的，那么这个时候`Vue`就需要知道当前`url`对应的是哪个组件页面，而控制这个的就是`vue-router`控件。

# 官网 #

vue-router的官网`GitHub`地址为：

*  [vue-router][]

这里我使用的是`vue-router`的`1.0`版本，其地址如下：

*  [vue-router 1.0][]

# vue-router的使用 #

## 源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue-router</title>
    </head>
    <body>
    <template id="page1">
        <h2>页面1</h2>
    </template>
    <template id="page2">
        <h2>页面2</h2>
    </template>
    <div id="app">
        <a href="javascript:void(0)" v-link="{path:'/page1'}">页面1</a> |
        <a href="javascript:void(0)" v-link="{path:'/page2'}">页面2</a>
        
        <router-view></router-view>
    </div>
    </body>
    <script src="../../../js/vue/vue/1.0/vue.js"></script>
    <script src="../../../js/vue/vue-router/1.0/vue-router.js"></script>
    <script type="application/javascript">
        //定义路由根组件
        var App = Vue.extend({});
        //定义page1页面
        var page1 = Vue.extend({
            template:'#page1'
        });
        //定义page2页面
        var page2 = Vue.extend({
            template:'#page2'
        });
        //设定路由规则
        var router = new VueRouter();
        router.map({
            'page1':{
                component:page1
            }
            ,'page2':{
                component:page2
            }
        });
        //开启路由
        router.start(App,'#app');
    </script>
    </html>

## 结果 ##

![在这里插入图片描述][20181104171837880.png]

## 分析 ##

上面实现的功能是通过点击页面的超链接，通过路由规则，以此来跳转到不同的页面。

通过代码，我们看到，在上面的代码中我们一共定义了三个路由组件，分别是跟路由组件`App`，`page1`页面组件与`page2`页面组件。

其中`App`组件是一个空组件，其实现的功能是用于展示其它切换过来的路由页面，该页面通过`App`内定义的`router-view`占位符进行展示。

`page1`页面组件与`page2`页面组件都是定义了单一的页面，其主要就是用于展示该页面中的内容。

`var router = new VueRouter()`用于创建路由规则，路由页面的跳转是通过路由规则来实现的，在这里，我们可以通过路由规则来匹配超链接中的`v-link="{path:'/page1'}"`所指定的路径，进而完成页面的展示。

最后通过`router.start(App,'#app');`来开启路由规则，这里需要指明路由的接管区域，也就是说需要指明`#app`。

通过上述说明，这样我们就可以通过点击页面中的超链接，进而跳转到所想要展示的页面。

[vue-router]: https://github.com/vuejs/vue-router
[vue-router 1.0]: https://github.com/vuejs/vue-router/tree/1.0
[20181104171837880.png]: /images/20220422/709cbe344fdd4eeeb8618e4210c77e7c.png