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

猜你喜欢

转载自blog.csdn.net/weixin_41481695/article/details/106246842