下面是我写的一个 demo
App.vue 文件
<template>
<div>这是根页面</div>
</template>
Login.vue 组件
<template>
<div>这是 login 页面</div>
<button @click="login">login</button>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const toHome = () => {
localStorage.setItem('username', 'tom');
router.push('/')
}
</script>
路由文件
const routes = [
{
path: '/',
redirect: () => {
if(localStorage['username'] == 'tom'){
return '/'
}else{
return '/login'
}
}
},
{
path: '/login',
component: login
},
]
我的本意是 login 页面因为没有任何复用的标签或组件,是完全独立于/
根页面的,没登录跳转到 Login 组件,但当我访问localhost:3000
时,我以为的页面是这样的
但实际渲染出来的页面是
为啥差别这么大呢,为啥根页面内容没被替换掉,login 页面的内容没渲染出来
首先项目自带的 App.vue 最终会渲染到于/
根页面上,我没理解错吧?
为啥组件不能脱离 App.vue 渲染单独当做一个页面使用吗?只能使用<router-view/>
或者<component is=''/>
镶嵌在 App.vue 中使用吗?
还有访问一个我没有在路由中配置的 url ,如/home
,按理说是 404 ,但实际还可以访问 App.vue 的渲染的/
根页面,难道就不能限制/
完全只匹配/
,不去匹配/home
,/user
?
1
Danswerme 2022-08-08 19:23:02 +08:00 1
App.vue 里面不应该是<router-view />吗? 没有这个组件,你的路由就不会生效,无论访问什么路径都是 App.vue 里面的内容。
|
2
rodrick 2022-08-08 19:29:08 +08:00
我感觉你可能是因为没有区分清楚路由和页面和组件的关系 路由的改变 要用 <router-view />来告诉 vue 路由改变的时候 是哪块的组件需要有变化 路由改变并不是整个页面的替换
|
3
tyx1703 2022-08-08 19:31:14 +08:00
App.vue 是在项目的入口文件挂载的,而不是通过路由,因此项目中其他所有内容都将是 App.vue 的子元素。
你应该在 App.vue 的模板中只保留 vue-router 组件,然后给 / 路径指定另一个新的组件,比如 Home.vue 。 > 还有访问一个我没有在路由中配置的 url ,如 /home ,按理说是 404 ,但实际还可以访问 App.vue 的渲染的 /根页面,难道就不能限制 /完全只匹配 /,不去匹配 /home ,/user ? 如上所说,App.vue 是渲染并不受路由,即 vue-router 控制,因此,所有路径都将会渲染它的内容。 |
5
daolanfler 2022-08-09 16:02:33 +08:00
vue-router 通过 url 找到指定的组件,在 router-view 里面去渲染。
|