• Vue路由基本的使用


    直接上代码,代码是学习东西的最好老师。下面是一个使用vue路由实现的简单小案例。
    总共有5个步骤:
    1、引入Vue文件
     这个地方需要自己把vue的js包下载下来或者是使用npm下载对应的依赖包
     不晓得怎么下载vue包安装的参考官方文档:https://cn.vuejs.org/v2/guide/installation.html
    2、创建组件
    3、设置路由规则
    4、映射路由
    5、路由切换,以及容器呈现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--1、引入Vue文件-->
        <script src="../lib/vue-2.4.0.js"></script>
        <script src="../lib/vue-router-3.0.1.js"></script>
    </head>
    <body>
    <div id="app">
        <!--5、路由切换,以及容器呈现-->
        <router-link to="/login" >登录</router-link>
        <router-link to="/register">注册</router-link>
        <!--容器 -->
        <router-view></router-view>
    </div>
    <script>
        // 2、创建组件
        var login = {
            template: '<h3>这是登录子组件,这个组件是 奔波霸 开发。</h3>'
        }
        var register = {
            template: '<h3>这是登录子组件,这个组件是 霸波奔 开发。</h3>'
        }
        // 3、设置路由规则
        var router = new VueRouter({
            routes:[
                // 默认路由,直接重定向到登录上
                { path: '/',redirect: '/login'},
                // 路由规则数组
                { path: '/login',component:login },
                { path: '/register',component:register}
            ],
            linkActiveClass: 'myactive' // 和激活相关的类
        });
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            // 4、映射路由
            router: router // 可以简写成router
        })
    </script>
    </body>
    </html>
    
  • 相关阅读:
    第01组 Beta冲刺(2/4)
    第01组 Beta冲刺(1/4)
    第01组 Alpha事后诸葛亮
    第01组 Alpha冲刺(4/4)
    第01组 Alpha冲刺(3/4)
    第01组 Alpha冲刺(2/4)
    第01组 Alpha冲刺(1/4)
    提高回顾与个人总结
    软件工程结对作业博客
    软件工程第一次阅读作业
  • 原文地址:https://www.cnblogs.com/myfaith-feng/p/12735097.html
Copyright © 2020-2023  润新知