vue-router的一个小实例

时间：2023-03-08 21:57:24

非2.0的

vue2.0还有vue-router2.0的改变还是挺大的

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

现在以一个简单的单页面应用开启vue-router之旅，这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。

1. 创建组件

首先引入vue.js和vue-router.js：

<script src="js/vue.js"></script>

<script src="js/vue-router.js"></script>

然后创建两个组件构造器Home和About：

// 定义组件

var Home = Vue.extend({

    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',

    data: function() {

        return {

            msg: 'Hello, vue router!'

        }

    }

})

var About = Vue.extend({

    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'

})

2. 创建Router

var router = new VueRouter()

调用构造器VueRouter，创建一个路由器实例router。

3. 映射路由

router.map({

    '/home': {

        component: Home

    },

    '/about': {

        component: About

    }

})

调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。
例如：'/home'是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件。

4. 使用v-link指令

<div class="content">

    <!-- 使用指令 v-link 进行导航。 -->

    <a class="select" v-link="{ path: '/home' }">Home</a>

    <a class="select" v-link="{ path: '/about' }">About</a>

</div>

在a元素上使用v-link指令跳转到指定路径。

5. 使用<router-view>标签

<router-view></router-view>

在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。

6. 启动路由

var App = Vue.extend({})

router.start(App, '#app')

路由器的运行需要一个根组件，router.start(App, '#app') 表示router会创建一个App实例，并且挂载到#app元素。
注意：使用vue-router的应用，不需要显式地创建Vue实例，而是调用start方法将根组件挂载到某个元素。

http://blog.****.net/sinat_17775997/article/details/52549123

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>router</title>

    <style type="text/css">

        html,body{

            width: %;

            height: %

        }

        #app{

            width: %;

            height: %;

            margin:  auto;

        }

        .content{

            width: 300px;

            height: 50px;

        }

        .select{

            display: inline-block;

            line-height: 50px;

            padding:  30px;

            font-size: 20px;

            background-color: #ffffff;

            border: 1px solid #ecf0f1;

            text-align: center;

            color: #;

            text-decoration:none;

        }

    </style>

    <script src="vue.js"></script>

    <script src="vue-router.js"></script>

</head>

<body>

    <div id="app">

        <h1 class="title">Welcome!</h1>

        <div class="content">

            <!-- 使用指令 v-link 进行导航。 -->

            <a class="select" v-link="{ path: '/home' }">Home</a>

            <a class="select" v-link="{ path: '/about' }">About</a>

        </div>

        <!-- 路由外链 -->

        <router-view></router-view>

    </div>

    <script type="application/javascript">

        // 定义组件

        var Home = Vue.extend({

            template: '<div><h1>Home</h1><p>{{msg}}</p></div>',

            data: function() {

                return {

                    msg: 'Hello, vue router!'

                }

            }

        })

        var About = Vue.extend({

            template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'

        })

        // 创建一个路由器实例

        // 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置

        var router = new VueRouter()

        // 定义路由规则

        // 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend

        // 创建的组件构造函数，也可以是一个组件选项对象。

        router.map({

            '/home': {

                component: Home

            },

            '/about': {

                component: About

            }

        })

        router.redirect({

            '/': '/home'

        })

        // 路由器需要一个根组件。

        // 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板

        var App = Vue.extend({})

        // 启动应用！

        // 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。

        router.start(App, '#app')

    </script>

</body>

</html>

相关文章