Vue路由router-link的使用

相关Html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/vue-2.4.0.js"></script>

    <script src="../js/vue-resource-1.3.4.js"></script>

    <!--1.引入vue-router-->

    <script src="../lib/vue-router-3.0.1.js"></script>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <style>

        .myactive {

            color: red;

            font-size: 20px;

        }

        .v-enter,

        .v-leave-to {

            opacity: 0;

            transform: translateX(140px);

        }

        .v-enter-active,

        .v-leave-active {

            transition: all 0.5s ease;

        }

    </style>

</head>

<body>

<div id="app">

    <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>

    <!--router-view,提供的用来当做占位符的 router中的规则会展现到这个里面去-->

    <transition mode="out-in">

        <router-view></router-view>

    </transition>

</div>

<script>

    var login = {

        template: '<h1>这个是登录组件</h1>'

    }

    var register = {

        template: '<h1>注册组件</h1>'

    }

    //在new

    var routerObj = new VueRouter({

        //这个配置对象中的route表示路由匹配规则的意思

        //1.path,表示监听,路由的连接地址

        //2.component 表示路由匹配到的path

        routes: [

            //注意:component属性值,必须是一个组件模板对象,不能是引用名称

            {path: '/', redirect: '/login'},

            {path: '/login', component: login},

            {path: '/register', component: register}

        ],

        linkActiveClass: 'myactive'

    })

    var vm = new Vue({

        el: "#app",

        data: {},

        methods: {},

        router: routerObj //将路由规则对象,注册到vm实例上,用来监听地址对象

    })

</script>

</body>

</html>

Vue路由router-link的使用的更多相关文章

  1. vue路由-router

    VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"&g ...

  2. 单页vue路由router

    Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...

  3. vue路由router的三种传参方式

    方法三: 传参页面传递参数方式: this.$router.push({ path: 'indexTwoDetails', query: { "id": id } }) 接受参数页 ...

  4. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  5. vue 路由动态传参 （多个）

    动态传参 传值页面  客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面  客户详情CustomerDetails.vue 通过this.$router.para ...

  6. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  7. Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

  8. vue路由请求 router

    创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from ' ...

  9. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  10. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

随机推荐

  1. 如何在eclipse的配置文件里指定jdk路径

    转载自:https://blog.csdn.net/gnail_oug/article/details/51925804:个人做了些小修改. 今天下载了eclipse4.6版本,打开时报Version ...

  2. python corrcoef

    该函数得到相关系数矩阵. 例子: vc=[1,2,39,0,8] vb=[1,2,38,0,8] print mean(multiply((vc-mean(vc)),(vb-mean(vb))))/( ...

  3. windows开启禁用网卡

    ' 在Windows中实现sudo命令--命令行环境中获取管理员权限 'ShellExecute 方法 '作用: 用于运行一个程序或脚本. '语法 ' .ShellExecute "appl ...

  4. C#-流、存储

    流输入输出 VS提供的类库,可方便数据的转移操作,一部分是文件和目录方面 file类 用静态方法,   fileinfo类 用实例方法   dictionary类 用静态方法   dictionary ...

  5. hdu 4996 1~n排列LIS值为k个数

    http://acm.hdu.edu.cn/showproblem.php?pid=4996 直接贴bc题解 按数字1-N的顺序依次枚举添加的数字,用2N的状态保存在那个min数组中的数字,每次新添加 ...

  6. Windows Phone 8.1 生命周期调试

    之前重装了机子,今天调试时突然找不到调试生命周期的菜单栏了.最后找了5分钟,终于找回来了,特此记录以免以后重装后再出现这种状况. 项目启动调试后: 这样是没有显示调试生命周期的,接下来在工具栏右键: ...

  7. Microsoft SQL Server 2012 管理 (2): Auditing

    -- Demostratin 2A (Using SQL Server Audit) -- Step 1: Use the master database USE master; GO -- Step ...

  8. SSD测试第一神器——FIO

    原文 地址 http://www.ssdfans.com/ssd%E6%B5%8B%E8%AF%95%E7%AC%AC%E4%B8%80%E7%A5%9E%E5%99%A8-fio-2/ 对于SSD性 ...

  9. CSharp程序员学Android开发---1.初识AndriodIDE，掌握工具使用

    最近公司组织项目组成员开发一个Android项目的Demo,之前没有人有Andoid方面的开发经验,都是开发C#的. 虽说项目要求并不是很高,但是对于没有这方面经验的人来说,第一步是最困难的. 项目历 ...

  10. linux系统编程之进程（六）：父进程查询子进程的退出,wait,waitpid

    本节目标: 僵进程 SIGCHLD wait waitpid 一,僵尸进程 当一个子进程先于父进程结束运行时,它与其父进程之间的关联还会保持到父进程也正常地结束运行,或者父进程调用了wait才告终止. ...