遇到一个问题整了一天虽然也看出是啥问题,然后我换了种访问路由的方法
就是点击主页超链接还有用户模块超链接,路由改变了,但是主页的内容都不变。(忽略我的页面设计,纯属练手乱配色的)
router的路由配置index.js(这边是没问题的)
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import User from '../components/User.vue'
import Student from '../components/Student.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/User',
name: 'User',
component: User
},
{
path: '/Student',
name: 'Student',
component: Student
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
app.vue内容
<template>
<div id="app">
<h1 class="aa">欢迎:{{msg}}</h1>
<a href="#/">主页 </a>
<a href="#/user">用户模块 </a>
<a href="#/student">学生模块 </a>
<router-view/>
</div>
</template>
<script>
...
</script>
<style>
....
</style>
解决方案:
把app.vue的路由访问方法改成
<template>
<div id="app">
<h1 class="aa">欢迎:{{msg}}</h1>
<p>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link to="/">主页 </router-link>
<router-link to="/user">用户模块 </router-link>
<router-link to="/student">学生模块 </router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
...
</script>
<style>
...
</style>
成功了!!!泪目