vue全家桶（2.2）
2024-08-23 22:46:13
3.3.router-link配置
3.3.1.实例
需求：实现下面效果，点击不同的菜单，显示不同的文字
核心代码：App组件
<template>
<div id="app">
<div class='page'>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/course">课程</a></li>
<li><a href="#/vip">会员</a></li>
<li><a href="#/question">问答</a></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style scoped>
.page {
width: 100%;
background-color: black;
color: white;
text-align: center;
font-size: 20px;
height: 60px;
line-height: 60px;
}
ul, li {
margin: 0;
padding: 0;
}
ul {
margin-left: 200px;
overflow: hidden;
}
li {
list-style: none;
float: left;
}
li a{
padding: 20px 30px;
color: white;
font-size: 14px;
text-decoration: none;
}
li a:hover{
background-color: orangered
}
</style>
路由配置：index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Course from '@/components/Course'
import Question from '@/components/Question'
import Vip from '@/components/Vip'
// 让vue-router作为vue的插件使用
Vue.use(VueRouter)
// 配置路由信息
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/course',
component: Course
},
{
path: '/vip',
component: Vip
},
{
path: '/question',
component: Question
}
]
})
export default router
3.3.2.使用router-link实现跳转
核心代码：App组件
<template>
<div id="app">
<div class="page">
<ul>
<li><router-link to="/">首页</router-link></li>
<li><router-link to="/course">课程</router-link></li>
<li><router-link to="/vip">会员</router-link></li>
<li><router-link to="/question">问答</router-link></li>
</ul>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: 'App',
components: {
}
}
</script>
<style scoped>
.page {
width: 100%;
background-color: black;
color: white;
text-align: center;
font-size: 20px;
height: 60px;
line-height: 60px;
}
ul, li {
margin: 0;
padding: 0;
}
ul {
margin-left: 200px;
overflow: hidden;
}
li {
list-style: none;
float: left;
}
li a{
padding: 20px 30px;
color: white;
font-size: 14px;
text-decoration: none;
}
li a:hover{
background-color: orangered
}
</style>
3.3.3.router-link的其他配置
1.可以动态绑定一个变量
核心代码
<template>
<div class="page">
<ul>
<li><router-link :to="index">首页</router-link></li>
<li><router-link :to="course">课程</router-link></li>
<li><router-link :to="vip">会员</router-link></li>
<li><router-link :to="question">问答</router-link></li>
</ul>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data () {
return {
index: '/',
course: '/course',
vip: '/vip',
question: '/question'
}
}
}
</script>
2.默认router-link生成的是a标签，可以更改成其他标签, 使用tag来设置
<template>
<div id="app">
<div class="page">
<ul>
<li><router-link :to="index" tag="div">首页</router-link></li>
<li><router-link :to="course" tag="div">课程</router-link></li>
<li><router-link :to="vip" tag="div">会员</router-link></li>
<li><router-link :to="question" tag="div">问答</router-link></li>
</ul>
</div>
</div>
</template>
3.设置router-link的激活样式
第一种方式，在全局配置一个linkActiveClass
// 配置路由信息
const router = new VueRouter({
//设置激活样式
linkActiveClass: 'nav-active',
routes: [
{
path: '/',
component: Home
},
{
path: '/course',
component: Course
},
{
path: '/vip',
component: Vip
},
{
path: '/question',
component: Question
}
]
})
```js
第二种方式，直接在router-link上增加active-class
```js
<li><router-link :to="index" active-class="nav-active">首页</router-link></li>
4.设置渲染组件的公共样式，可以直接在router-view上增加class
<router-view class="center"></router-view>
5.可以更改切换的事件，默认是鼠标点击切换,通过设置event实现
<template>
<div id="app">
<div class="page">
<ul>
<li><router-link :to="index" active-class="nav-active" event="mouseover">首页</router-link></li>
<li><router-link :to="course" event="mouseover">课程</router-link></li>
<li><router-link :to="vip" event="mouseover">会员</router-link></li>
<li><router-link :to="question" event="mouseover">问答</router-link></li>
</ul>
</div>
</div>
</template>
螺钉课堂视频课程地址：http://edu.nodeing.com
最新文章
- _ATTRIBUTE__ 你知多少？
- 初识 MySQL 5.6 新功能、参数
- fastjson 使用方法
- RSpec自定义matcher
- The breakpoint will not currently be hit. vs2005断点不被命中
- 庖丁解牛FPPopover
- HDU 2063：过山车（偶匹配，匈牙利算法）
- 严格模式 (JavaScript)
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
- 毕业论文内容框架指导-适用于MIS系统
- JSP、HTML页面概述
- 【PostgreSQL】安装出现microsoft vc++ runtime installer
- 面向连接的TCP概述
- css：长度距离的一个计算函数calc
- TOJ 2130: Permutation Recovery（思维+vector的使用）
- 在ugui上显示3d物体
- 【干货】YUM安装PHP 7版本后，增加phalcon框架的报错解决
- 【两分钟视频教程】如何使用myeclipse在mac本机运行iOS配套的服务器
- CAS (5) —— Nginx代理模式下浏览器访问CAS服务器配置详解
- ifame_自适应高度