vue.js_10_vue的路由

1.vue-router的基本使用

1>安装vue-rouder路由模块

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

2>创建一个VueRouter对象

var routerObj = new VueRouter({
                //routers 代表router对象中路由的匹配规则
                //参数1：path，表示监听哪一个地址
                //参数2：表示如果参数1监听到了，则展示component对应的组件

                //component参数 必须是一个组件模板对象，而不能是组件模板
                routes: [{
                        path: '/',
                        redirect: '/login'
                    }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
                    {
                        path: '/login',
                        component: login
                    },
                    {
                        path: '/register',
                        component: register
                    },
                ],
　　　　　　　　　　//修改默认的style样式类
                linkActiveClass:'myActive'
            })

3> 将路由规则对象，注册到vm实例上。用来监听URL地址的变化，然后展示对应的组件

var vm = new Vue({
                el: '#app',
                data: {},
                methods: {},
                //将路由规则对象，注册到vm实例上。用来监听URL地址的变化，然后展示对应的组件
                router: routerObj
            });

4>在组件中渲染

<div id="app">
            <!--<a href="#/login">登录</a>
            <a href="#/register">注册</a>-->
            <!--router-link 默认渲染一个a标签 -->
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>

2.一个基本的路由

<body>
        <div id="app">
            <!--<a href="#/login">登录</a>
            <a href="#/register">注册</a>-->
            <!--router-link 默认渲染一个a标签 -->
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>
        <script>
            //创建一个vue的router对象

            var login = {
                template: '<h1>登录组件</h1>'
            }

            var register = {
                template: '<h1>注册组件</h1>'
            }
            //            Vue.component('login',{
            //                template:'<h3></h3>'
            //            });
            var routerObj = new VueRouter({
                //routers 代表router对象中路由的匹配规则
                //参数1：path，表示监听哪一个地址
                //参数2：表示如果参数1监听到了，则展示component对应的组件

                //component参数 必须是一个组件模板对象，而不能是组件模板
                routes: [{
                        path: '/',
                        redirect: '/login'
                    }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
                    {
                        path: '/login',
                        component: login
                    },
                    {
                        path: '/register',
                        component: register
                    },
                ],
                linkActiveClass:'myActive'
            })
            var vm = new Vue({
                el: '#app',
                data: {},
                methods: {},
                //将路由规则对象，注册到vm实例上。用来监听URL地址的变化，然后展示对应的组件
                router: routerObj
            });
        </script>
    </body>