选中组件高亮 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./node_modules/vue/dist/vue.js"></script>
10   <script src="./node_modules/vue-router/dist/vue-router.js"></script>
11 </head>
12 
13 <body>
14   
15   <style>
16   .router-link-active{
17     color: red;
18     font-weight: bolder;
19     font-size: 30px;
20   }
21   </style>
22   <div id="app">
23     <!-- <a href="#/login">login</a> -->
24     <!-- <a href="#/regis">regis</a> -->
25     <router-link to="/login" tag="span">login</router-link>
26     <router-link to="/regis" tag="span">regis</router-link>
27     <router-view></router-view>
28   </div>
29 
30   <script>
31     var login = {
32       template: '<h1>login</h1>'
33     }
34     var regis = {
35       template: '<h1>regis</h1>'
36     }
37 
38     var routerobj = new VueRouter({
39       routes: [
40         //  路由匹配规则
41         { path:'/',redirect:'/login'},  // 根路径强制重定向登录路径中去
42         { path: '/login', component: login },
43         { path: '/regis', component: regis }
44       ]
45     })
46 
47     new Vue({
48       el: "#app",
49       data: {},
50       methods: {
51 
52       },
53       router: routerobj
54 
55     })
56   </script>
57 </body>
58 
59 </html>

 

posted @ 2019-09-17 10:53  normalboy(NB)  阅读(155)  评论(0)    收藏  举报