vue-router

vue-router简单配置

<div id="app">
        <div>
            <!-- router-link 组件导航 -->
            <router-link to="/login">登录页</router-link>
            <router-link to="/register">注册页</router-link>
        </div>
        <!-- router-view 路由匹配的组件渲染到此 -->
        <router-view></router-view>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
    //定义组件
    var login = {
        template: "<div>这是登录页</div>"
    }
    var register = {
            template: "<div>这是注册页</div>"
        }
        //定义路由
    var routes = [{
            path: '/login',
            component: login
        }, {
            path: '/register',
            component: register
        }]
        //创建router实例 传入routes配置
    var router = new VueRouter({
            routes: routes
        })
        //创建和挂载根实例
    var app = new Vue({
        router: router
    }).$mount('#app')
    </script>