Vue学习日记--玖

vue-router的使用

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
优点如下：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

下面来个例子：

	<!--1.引入vue的模块-->
    <script type="text/javascript" src="vue.js"></script>
    <!-- 2.引入vue-router模块-->
    <script type="text/javascript" src="vue-router-dev/dist/vue-router.js"></script>

        //4.创建router对象
        var router = new VueRouter({
    
    
//            5. 配置路由对象
            routes:[
                {
    
    
                    path:'/login',
                    component:Login
                },
                {
    
    
                    path:'/register',
                    component:Register
                }
             ]
        });
        //引入vue-router模块之后 抛出来两个全局组件 router-link：a to：href
//          router-view：路由匹配组件的出口
   var App = {
    
    
            template:'<div>' +
            '<router-link to="/login">登录界面</router-link>'+
            '<router-link to="/register">注册界面</router-link>' +
            '<router-view></router-view>' +
            '</div>'
        };

        new Vue({
    
    
           el:"#app",
            components:{
    
    
                App:App
            },
            //6.交给实例化对象管理
            router,
            template:'' +
            '<div><App/></div>'
        });

渲染效果如下：

点击后，相应的DOM被渲染出来。

SPA 单页面应用 Single Page Application