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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容