效果

vue程式碼

 1  <template>
 2     <!-- link 文字連結 vue程式程式碼測試練習 -->
 3     <div>
 4         <el-link href="https://element.eleme.io" target="_blank">預設連結</el-link>
 5         <el-link type="primary">主要連結</el-link>
 6          <el-link type="success">成功連結</el-link>
 7
 
           <el-link type="warning">警告連結</el-link>
 8            <el-link type="danger">危險連結</el-link>
 9             <el-link type="info">資訊連結</el-link>
10 
11     </div>
12 </template>

路由

 1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
 3 import Home from
 
 '../views/Home.vue'
 4 
 5 Vue.use(VueRouter)
 6 
 7 const routes = [
 8   {
 9     path: '/',
10     name: 'Home',
11     component: Home
12   },
13 
14   {
15     path: '/about',
16     name: 'About',
17     
18     component: () => import('../views/About.vue')
19   },
20 // test 路由增加
21   // {
22   //   path: '/test',
 
23   //   name: 'test',
24   //   component: () => import("./views/Test.vue"),
25   // },
26   // {
27   //   path: '/test',
28   //   name: 'test',
29   //   // route level code-splitting
30   //   // this generates a separate chunk (about.[hash].js) for this route
31   //   // which is lazy-loaded when the route is visited.
32   //   component: () => import(/* webpackChunkName: "about" */ '../views/Test.vue')
33   // },
34   {
35     path:'/test',
36     name:'test',
37     component:()=>import('../views/Test2.vue')
38   },
39   
40 //time加路由。
41 {
42   path: '/time',
43   name:'time',
44   component: () => import('../views/Time.vue')
45 },
46 // 下拉
47 {
48   path: '/xiala',
49   name: 'xiala',
50   component:() => import('../views/Xiala.vue')
51 },
52 // 對話方塊
53 {
54   path: '/dialog',
55   name: 'diglog',
56   component:() => import('../views/Dialog.vue')
57 },
58 // link 文字連結
59 {
60   path: '/link',
61   name: 'link',
62   component:() => import('../views/Link.vue')
63 },
64 
65 
66 ]
67 
68 const router = new VueRouter({
69   mode: 'history',
70   base: process.env.BASE_URL,
71   routes
72 })
73 
74 export default router