router-link to 怎么动态赋值
我看网上有个在其他页面传值的,我要的是在本页面赋值
<template>
<logon-andin></logon-andin>
<lunbo></lunbo>
<div style="font-size: 18px;margin: 50px auto; width: 90%;font-weight: bold">
电影播放时间: 默认显示为当天播放内容
</div>
<table>
<tr>
<td>
<router-link v-bind:to="{path : to1}" @click="ck">{{ date1 }}</router-link>
</td>
<td>
<router-link v-bind:to="{path : to2}" @click="ck">{{ date2 }}</router-link>
</td>
</tr>
</table>
<div v-if="one">
<OneDay></OneDay>
</div>
<div v-if="tow">
<TowDay></TowDay>
</div>
<router-view></router-view>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import Lunbo from '@/components/首页模块/轮播/LunBo.vue'
import LogonAndin from '@/components/登录注册模块/logonAndin.vue'
import OneDay from '@/components/首页模块/其它/OneDay.vue'
import TowDay from '@/components/首页模块/其它/TowDay.vue'
const date1 = ref()
const date2 = ref()
const DateGet = new Date()
const nian = DateGet.getFullYear()
const yue = DateGet.getMonth() + 1
const ri = DateGet.getDate()
// 获取年月日
const di = new Date(nian, yue, 0)
const to1 = ref()
const to2 = ref()
const one = ref()
const tow = ref()
const ck = () => {
one.value = false
tow.value = false
}
onMounted(() => {
date1.value = yue + '月' + ri + '日'
// 让date1为当前日期
if (ri === di) {
date2.value = (yue + 1) + '月' + 1 + '日'
} else {
date2.value = yue + '月' + (ri + 1) + '日'
}
// date2为当前日期+1,如果是今天是月底,则日期为下个月1日
if (ri % 2 === 1) {
to1.value = '/QiTa/OneDay'
to2.value = '/QiTa/TowDay'
one.value = true
tow.value = false
} else {
to2.value = '/QiTa/OneDay'
to1.value = '/QiTa/TowDay'
one.value = false
tow.value = true
}
})
</script>
<style lang="scss">
table {
width: 90%;
}
td {
width: 45%;
text-align: center;
font-size: 20px;
}
</style>
如上,我想将第一个链接赋值为to1,第二个链赋值为to2,直接写的话页面报错,显示不出来,我该怎么写才能正常显示
在你的代码中，你已经使用了 v-bind 来动态绑定 router-link 的 to 属性。这是一种正确的方法。然而，你在绑定 to 属性时，需要将 to1 和 to2 的值设置为字符串路径，而不是直接写数字或字符串。
修改你的代码如下：
<template>
<logon-andin></logon-andin>
<lunbo></lunbo>
<div style="font-size: 18px;margin: 50px autoto="to1" @click="ck">{{ date1 }}</router-link>
</td>
<td>
<router-link v-bind:to="to2" @click="ck">{{ date2 }}</router-link>
</td>
</tr>
</table>
<div v-if="one">
<OneDay></OneDay>
</div>
<div v-if="tow">
<TowDay></TowDay>
</div>
<router-view></router-view>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import Lunbo from '@/components/首页模块/轮播/LunBo.vue'
import LogonAndin from '@/components/登录注册模块/logonAndin.vue'
import OneDay from '@/components/首页模块/其它/OneDay.vue'
import TowDay from '@/components/首页模块/其它/TowDay.vue'
const date1 = ref()
const date2 = ref()
const DateGet = new Date()
const nian = DateGet.getFullYear()
const yue = DateGet.getMonth() + 1
const ri = DateGet.getDate()
// 获取年月日
const di = new Date(nian, yue, 0)
const to1 = ref('/QiTa/OneDay') // 这里需要设置为你想要的路径
const to2 = ref('/QiTa/TowDay') // 这里需要设置为你想要的路径
const one = ref()
const tow = ref()
const ck = () => {
one.value = false
tow.value = false
}
onMounted(() => {
date1.value = yue + '月' + ri + '日'
// 让date1为当前日期
if (ri === di) {
date2.value = (yue + 1) + '月' + 1 + '日'
} else {
date2.value = yue + '月' + (ri + 1) + '日'
}
// date2为当前日期+1，如果是今天是月底，则日期为下个月1日
if (ri % 2 === 1) {
to1.value = '/QiTa/OneDay'
to2.value = '/QiTa/TowDay'
one.value = true
tow.value = false
} else {
to2.value = '/QiTa/OneDay'
to1.value = '/QiTa/TowDay'
one.value = false
tow.value = true
}
})
</script>
在Vue.js中，使用router-link组件并动态赋值to属性，可以通过以下方式修改代码：
<template>
<div>
<router-link :to="to1">{{ to1 }}</router-link>
<router-link :to="to2">{{ to2 }}</router-link>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const to1 = ref('')
const to2 = ref('')
onMounted(() => {
// 通过某种方式获取to1、to2的动态值
// 示例中直接赋予了静态值，实际应该根据需要动态获取
to1.value = '/path1'
to2.value = '/path2'
})
return {
to1,
to2
}
}
}
</script>
关键点在于使用:to="to1"和:to="to2"来动态绑定to属性。同时，还需要在router-link组件内部展示to1和to2的值，可以使用双大括号的方式({{ to1 }}和{{ to2 }})。
这样修改后，即可实现动态赋值router-link的to属性，而不会出现报错。