效果
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