vue 路由的概念,和 vue路由语法详解 - 前端笔记-1.路由的概念 路由本质就是一种对应关系,比如说我们在url地址中输入,我们要访问的地址,浏览器要去请求这个url地址对应的资源,那么url地址和真实资源之间有一种对应的关系,...

学习笔记

乾坤未定,你我皆是黑马
乾坤已定,我便扭转乾坤
首页>> >>vue 路由的概念,和 vue路由语法详解 - 前端笔记
2020-1-6
分类:

vue 路由的概念,和 vue路由语法详解

文章作者:痴迷

1.路由的概念     路由本质就是一种对应关系,比如说我们在url地址中输入,我们要访问的地址,浏览器要去请求这个url地址对应的资源,那么url地址和真实资源之间有一种对应的......

1.路由的概念
    路由本质就是一种对应关系,比如说我们在url地址中输入,我们要访问的地址,浏览器要去请求这个url地址对应的资源,那么url地址和真实资源之间有一种对应的关系,就是路由

路由分前端路由和后端路由
(1)后端路由是由服务器端进行实现的
(2)前端路由是依靠hash值(锚链接)的变化进行实现的

2.vue路由语法详解
    vue路由   是通过hash(锚链接的方法) 对事数据的刷新的
    总结以下几点:
    1.引入vue.js 
    2.构造切换组件的模块
    3.构造组件的占位符(占位符的名字可以随意取,但是属性值必须  :is='变量')
    4.在vue实例里面添加一个变量作为  占位符的变量
    5.在vue实例里面注册几个局部组件
    6.通过onhashchange 监听 hash值 , hash可以通过 location.hash 获取,取到相对的值,对其值赋值,
    
简单点说就是 通过地址栏变化而进行组件的变换


    <!-- //引入vue.js -->
    <script type="text/javascript" src="js/vue.js"></script>

    <div id="app">
        {{msg}}
        <hr/>
        <!-- //构建文件 -->
        <ul>
            <a href="#/dh1">导航1</a>
            <a href="#/dh2">导航2</a>
            <a href="#/dh3">导航3</a>

        </ul>

        <!-- 构建模板 -->
        <ul>

            <c :is="son"></c>

        </ul>

    </div>
    <script type="text/javascript">
        // 通过onhashchange 监听 hash的值
        //通过 location.hash 可以获取到 hash值
        window.onhashchange = function() {
            switch (location.hash) {
                case '#/dh1':
                    vm.son = 'dh1'
                    break
                case '#/dh2':
                    vm.son = 'dh2'
                    break
                case '#/dh3':
                    vm.son = 'dh3'
                    break
            }

        }

        //vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                son: 'dh2'
            },
            //组件
            components: {
                dh1: {
                    template: `<div>我是dh1</div>`
                },
                dh2: {
                    template: `<div>我是dh2</div>`
                },
                dh3: {
                    template: `<div>我是dh3</div>`
                }
            }
        });
    </script>

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vue 路由的概念,和 vue路由语法详解
版权所有:《前端笔记
文章标题:《vue 路由的概念,和 vue路由语法详解
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-41.html

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)