vue空格占位符_VUE学习笔记----day4

最新推荐文章于 2023-09-10 21:31:44 发布

weixin_39988331

最新推荐文章于 2023-09-10 21:31:44 发布

阅读量954

点赞数

文章标签： vue空格占位符

路由

概念

对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="./vue-2.4.0.js"></script>
 <script src="./vue-resource-1.3.4.js"></script>
 <!-- 1.导入路由模块 -->
 <script src="./vue-router-3.0.1.js"></script>
<style>
        //选中的router-link类名为router-link-active，通过设置router-link-active设置样式
        .router-link-active{
            color:red
        }
    </style>
</head>

<body>
 <div id="app">
   <!-- <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
      <!-- 路由展示的占位符 -->
 <router-view></router-view>
 </div>


 <script>

 // 组件模板对象
 var login = {
 template: '<h1>登录页面</h1>'
        }
 var register = {
 template: '<h1>注册页面</h1>'
        }
 // 2.创建路由对象
 // 创建路由对象的时候可以传递一个配置对象，表示路由匹配规则
 var vueObj = new VueRouter({
 // 路由匹配规则：
 // 每个匹配规则都是一个对象，对象有两个属性值
 // 第一个path，表示监听哪个链接地址
 // 第二个是component，匹配到path则展示对应component(必须是一个模板对象，不能是名称)
 routes: [
                //redirect重定向
                 // { path: '/', component: login },
                { path: '/', redirect: '/login'},
                { path: '/register', component: register }
            ]
        }
        )
 var vm = new Vue({
 el: '#app',
 data: {},
 methods: {},
 // 3.将路由对象注册到VM实例上，监听URL地址变化，展示对应的组件
 router: vueObj
        })


 </script>

</body>

</html>

路由传参

//query传值
<body>
 <div id="app">
 <router-link to="/login?id=10&name=zhangsan">登录</router-link>
 <router-link to="/register">注册</router-link>
 <router-view></router-view>
 </div>


 <script>

 var login = {
  template: '<h1>登录页面------{{this.$route.query.id}}-------{{this.$route.query.name}}</h1>',
    created(){
       console.log(this.$route.query.id)
        }
  }

 var register = {
       template: '<h1>注册页面</h1>'
   }

 var vueObj = new VueRouter({
 routes: [
                { path: '/', redirect: '/login'},
                { path: '/login', component: login },
                { path: '/register', component: register }
            ]
        }
        )
 var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    router: vueObj
   })
 </script>

</body>
----------------------------------------------------------------------
//params传值
<body>
    <div id="app">
        <router-link to="/login/12">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>


    <script>

        var login = {
            template: '<h1>登录页面------{{this.$route.query.id}}</h1>',
            created(){
                console.log(this.$route.params.id)
            }
        }
        var register = {
            template: '<h1>注册页面</h1>'
        }
        var vueObj = new VueRouter({
            routes: [
                { path: '/', redirect: '/login'},
                { path: '/login/:id', component: login },
                { path: '/register', component: register }
            ]
        }
        )
        var vm = new Vue({
            el: '#app',
            data: { },
            methods: {},
            router: vueObj
        })
    </script>
</body>
</html>

路由嵌套

<body>
 <div id="app">
 <router-link to="/account">account</router-link>
 <router-view></router-view>
 </div>

 <template id="temp1">
 <div>
 <h1>account组件</h1>
 <router-link to="/account/login">登录</router-link>
 <router-link to="/account/register">注册</router-link>
 <router-view></router-view>
 </div>
 </template>

 <script>


 var account = {
 template: '#temp1'
        }

 var login = {
 template: '<h1>登录页面</h1>',
        }

 var register = {
 template: '<h1>注册页面</h1>'
        }
 var vueObj = new VueRouter({
 routes: [
                { 
 path: '/account',
 component: account ,
  //path前不要带/，否则以根路径开始请求
 children:[
                         { path: 'login', component: login },
                         { path: 'register', component: register }
                    ]},
 
            ]
        }
        )
 var vm = new Vue({
 el: '#app',
 data: {},
 methods: {},
 router: vueObj
        })
 </script>
</body>

路由命名

<body>
 <div id="app">
//路由占位符命名
 <router-view name="top"></router-view>
    <div class="container">
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>
 </div>
 </div>

 <script>

 var topBox = {
     template: ' <h1 class="header">头部</h1>'
 }

 var leftBox = {
 template: '<h1 class="left">左侧窗口</h1>'
        }

 var mainBox = {
     template: '<h1 class="main">主窗口</h1>'
}


 var router = new VueRouter({
    routes: [
                {
   //path对应多个组件
      path: '/', components: {
           'main': mainBox,
          'left': leftBox,
           'top': topBox
                    }
                }
            ]
        })
 var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
        })
 </script>
</body>

weixin_39988331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue空格占位符_VUE学习笔记----day4

路由概念对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...
复制链接

扫一扫