标签：charset imu oct jquer register eth 最新版本 style one
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> 7 <title>管理后台</title> 8 <script src="../lib/jquery2.1.4.min.js"></script> 9 <script src="../lib/Vue2.5.17.js"></script> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> 12 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 14 </head> 15 <style> 16 /* 使用了router-link的组件会有一个router-link-active类 */ 17 .router-link-active { 18 color: red; 19 font-weight: bold; 20 font-size: 18px; 21 } 22 </style> 23 <body> 24 <div id="app"> 25 <!-- <a href="#/login">登录</a> 26 <a href="#/register">登录</a> --> 27 <!-- 不推荐使用#号这种方式 --> 28 29 <!-- Vue-router提供了一个<router-link to="/lgin"></router-link> --> 30 <router-link to="/login">登录</router-link> 31 <!-- 默认渲染为一个a标签，通过tag可以修改 --> 32 <router-link to="/register" tag="span">注册</router-link> 33 <!-- 这是由vue-router提供的元素，用来当作占位符的，路由规则匹配到的组件就会展示到这个router-view中 --> 34 <!-- 使用router-view 提供一个展示的容器 --> 35 <router-view></router-view> 36 </div> 37 <template id="tmp"> 38 <div> 39 <h1>我是模板一的内容，登录</h1> 40 </div> 41 </template> 42 <template id="tmp1"> 43 <div> 44 <h1>我是模板二的内容，注册</h1> 45 </div> 46 </template> 47 <script> 48 49 var login = { 50 template : ‘#tmp‘ 51 } 52 var register = { 53 template : ‘#tmp1‘ 54 } 55 56 var routerObj = new VueRouter({ 57 // route //这个配置对象中的router表示路由匹配规则的意思 58 routes : [ //路由匹配规则 59 // 每个路由规则都是一个对象，这个规则对象身上有两个必须的属性 60 // 属性1是path , 表示监听哪个路由链接地址 61 // 属性2是component ， 表示如果路由前面匹配到的path,则展示component属性对应的组件 62 // component的属性值，必须是一个模板对象，不能是一个组件名称。 63 { path : ‘/‘ , redirect : ‘/login‘}, //这是的redirect和node中的redirect不一样。 64 { path : ‘/login‘ , component : login}, 65 { path : ‘/register‘ , component : register}, 66 ], 67 // 自定义激活的类名称 68 linkActiveClass : ‘myactive‘ 69 }) 70 71 var vm = new Vue({ 72 el : ‘#app‘, 73 data : {}, 74 methods: { 75 76 }, 77 // 将路由规则对象注册到vm实例上用来监听url地址变化 ，然后展示对应组件。 78 router : routerObj 79 }) 80 </script> 81 </body> 82 </html>
标签：charset imu oct jquer register eth 最新版本 style one
原文地址：https://www.cnblogs.com/winter-shadow/p/10216851.html
