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>
    
  • 相关阅读:
    jQuery扩展函数设置所有对象只读
    Jquery一些实用函数
    原码,反码,补码
    数据库查询练习
    已知二叉树的先序遍历和中序遍历画出该二叉树
    linux 下 Google配置SwitchyOmega
    字母和数字转换
    c++产生验证码字符串
    C++产生随机数
    快速排序
  • 原文地址:https://www.cnblogs.com/myfaith-feng/p/12735097.html
Copyright © 2011-2022 走看看