zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    前三次复利计算程序的总结
    Compound Interest Calculator3.0
    Compound Interest Calculator2.0
    Compound Interest Calculator1.0
    操作系统第一次作业
    学习进度条
    0302感想和问题回答
    1231递归下降语法分析程序设计
    1211有限自动机构造与识别
    5份Java面经
  • 原文地址:https://www.cnblogs.com/myfaith-feng/p/12735097.html
Copyright © 2011-2022 走看看