vue路由,命名路由,编程式导航,声明式导航 - 前端笔记-一,命名路由 命名路由:就是给路由取给别名 !--//引入js文件-- &n...

学习笔记

点滴记忆
回忆过往
首页>> >>vue路由,命名路由,编程式导航,声明式导航 - 前端笔记
一,命名路由
    命名路由:就是给路由取给别名
  <!-- //引入 js文件 -->
    <script type='text/javascript' src='js/vue.js'></script>
    <script src="./js/vue-router_3.0.2.js"></script>
    <div id='app'>
        <!-- // 路由链接 -->
        <router-link :to="{name:'ccc',params:{sex:'男',id:1},query:{id:1}}">导航1</router-link>
        <router-link to="/dh2">导航2</router-link>

        <!-- // 路由填坑 -->
        <router-view></router-view>
    </div>
    <script type='text/javascript'>
        //自定义组件
        var dh1 = {
            template: `<h1>我是登录==={{$route.params.sex}}==={{$route.query.id}}</h1>`
        }
        var dh2 = {
                template: `<h1>我是注册</h1>`
            }
            //创建路由实例和设置路由
        var router = new VueRouter({
            routes: [{
                path: '/dh1?id',
                name: 'ccc',
                component: dh1
            }, {
                path: '/dh2',
                component: dh2
            }, ]
        });

        //vue实例  挂载路由
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            router
        });
    </script>

二,声明式导航
    声明式导航就是通过 a标签(锚链接)  发送hash值进行路由的跳转的 
    
三,编程式导航
    编程式导航就是 通过js ,api 方法实现导航

<body>
    <!-- //引入js -->
    <script type='text/javascript' src='js/vue.js'></script>
    <script src="./js/vue-router_3.0.2.js"></script>
    <div id='app'>
        <!-- //路由链接,通过点击事件触发函数 -->
        <ul>
            <li @click="dh1">导航1</li>
            <li @click="dh2">导航2</li>
            <li @click="dh3">导航3</li>
        </ul <!-- //填坑 -->
        <div>
            <router-view></router-view>

        </div>
    </div>
    <script type='text/javascript'>
        //自定义组件
        var dh1 = {
            template: `<h1>我是dh1</h1>`
        }
        var dh2 = {
            template: `<h1>我是dh2</h1>`
        }
        var dh3 = {
                template: `<h1>我是dh3</h1>`
            }
            //创建组件
        var router = new VueRouter({
            routes: [{
                path: '/dh1',
                component: dh1
            }, {
                path: '/dh2',
                component: dh2
            }, {
                path: '/dh3',
                component: dh3
            }, ]
        });
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            router,
            methods: {
                dh1() {
                    this.$router.push({
                        path: '/dh1',
                        query: {
                            id: 1
                        }
                    })
                },

                dh2() {
                    this.$router.push({
                        path: '/dh2',
                        query: {
                            id: 2
                        }
                    })
                },

                dh3() {
                    this.$router.push({
                        path: '/dh3',
                        query: {
                            id: 3
                        }
                    })
                },
            },
        });
    </script>
</body>






















×

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

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

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

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

打赏作者
版权所有,转载注意明处:前端笔记 » vue路由,命名路由,编程式导航,声明式导航
版权所有:《前端笔记
文章标题:《vue路由,命名路由,编程式导航,声明式导航
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-46.html

发表评论

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

网友评论(0)