Vue路由router-link的使用

相关Html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../js/vue-2.4.0.js"></script>
  7.     <script src="../js/vue-resource-1.3.4.js"></script>
  8.     <!--1.引入vue-router-->
  9.     <script src="../lib/vue-router-3.0.1.js"></script>
  10.     <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
  12.     <style>
  13.         .myactive {
  14.             color: red;
  15.             font-size: 20px;
  16.         }
  18.         .v-enter,
  19.         .v-leave-to {
  20.             opacity: 0;
  21.             transform: translateX(140px);
  22.         }
  24.         .v-enter-active,
  25.         .v-leave-active {
  26.             transition: all 0.5s ease;
  28.         }
  30.     </style>
  31. </head>
  32. <body>
  33. <div id="app">
  35.     <router-link to="/login">登录</router-link>
  36.     <router-link to="/register">注册</router-link>
  38.     <!--router-view,提供的用来当做占位符的 router中的规则会展现到这个里面去-->
  39.     <transition mode="out-in">
  40.         <router-view></router-view>
  41.     </transition>
  42. </div>
  44. <script>
  45.     var login = {
  46.         template: '<h1>这个是登录组件</h1>'
  47.     }
  48.     var register = {
  49.         template: '<h1>注册组件</h1>'
  50.     }
  52.     //在new
  53.     var routerObj = new VueRouter({
  54.         //这个配置对象中的route表示路由匹配规则的意思
  55.         //1.path,表示监听,路由的连接地址
  56.         //2.component 表示路由匹配到的path
  57.         routes: [
  58.             //注意:component属性值,必须是一个组件模板对象,不能是引用名称
  59.             {path: '/', redirect: '/login'},
  60.             {path: '/login', component: login},
  61.             {path: '/register', component: register}
  62.         ],
  63.         linkActiveClass: 'myactive'
  64.     })
  66.     var vm = new Vue({
  67.         el: "#app",
  68.         data: {},
  69.         methods: {},
  70.         router: routerObj //将路由规则对象,注册到vm实例上,用来监听地址对象
  72.     })
  74. </script>
  75. </body>
  76. </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. ViewFlipper实现自动播放的图片库

    作者实现的基础上,加上了文字的变换 public class MainActivity extends Activity { private ViewFlipper viewFlipper; priv ...

  2. DVWA

    DVWA默认的用户有5个,用户名密码如下(一个足以): admin/password gordonb/abc123 1337/charley pablo/letmein smithy/password

  3. OPCache使用示例

    OPcache 有什么用? OPcache 通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能, 存储预编译字节码的好处就是 省去了每次加载和解析 PHP 脚本的开销. OPca ...

  4. 第二届普适计算和信号处理及应用国际会议论文2016年 The 2nd Conference on Pervasive Computing, Signal Processing and Applications(PCSPA, 2016)

    A New Method for Mutual Coupling Correction of Array Output Signal 一种阵列输出信号互耦校正的新方法 Research of Robu ...

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

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

  6. 网页程序 vs 桌面程序

    网页程序 vs 桌面程序 阅读:  评论:  作者:Rybby  日期:  来源:rybby.com 所谓的网页程序就是指以网页作为程序的操作界面,通过脚本语言“javascript”或其它客户端语言 ...

  7. 一个CSV文件解析类

    import java.io.BufferedReader; import java.io.FileReader; import java.util.ArrayList; import java.ut ...

  8. MAC将 /etc/sudoers文件修改错后的几种解决方法

    文件修改错误后难以再次修改的原因: 1.修改此文件必须是root权限 2.此文件出现问题时sudo命令不可用 3.默认情况下MAC系统不启用root用户 解决的方法: 一.启用root用户,使用roo ...

  9. Alwayson--使用证书创建高可用性组

    --场景: --有服务器SQLNode11,SQLNODE21,SQLNODE31三台在同一故障转移群集SQLNode01中 --的数据库服务器,安装SQL SERVER 2012 并配置启动alwa ...

  10. 用.netcore写一个简单redis驱动,调试windows版本的redis.平且给set和get命令添加参数.

    1. 下载windows版本的redis 2.开发环境vs2017  新建一个 .net core控制台. private static Socket socket = new Socket(Addr ...