为什么vue中页面跳转的时候地址上没显示

在Vue中，当我们进行页面跳转时，有时候我们会发现浏览器的地址栏并没有发生变化，即地址上没有显示。这是因为Vue使用了前端路由机制来实现页面跳转，而不是传统的后端路由。下面我将详细解释为什么在Vue中页面跳转时地址上不显示。

1. 前端路由机制
   在传统的网页开发模式中，页面的跳转是通过后端服务器处理的，每次跳转都需要向后端发送请求，后端再返回对应的页面。而在Vue中，使用了前端路由机制。前端路由是指通过修改浏览器的URL地址来实现页面之间的切换，而不需要向后端发送请求。Vue底层使用的是HTML5中的History API，可以通过pushState()或replaceState()方法来改变浏览器的URL地址。

2. 单页面应用（SPA）
   Vue采用的是单页面应用（SPA）的架构模式。所谓单页面应用，是指在整个应用中只有一个实际页面，而所有的页面切换都是在这个实际页面上进行的。在单页面应用中，使用Vue的路由功能可以实现页面的切换，而不需要进行整个页面的重新加载。这样可以提高用户的体验，并且减少了不必要的请求，提高了应用的性能。

3. 路由配置
   在Vue中，我们可以通过配置路由来定义页面之间的跳转。在路由配置中，我们可以指定不同的路径对应不同的组件，当用户访问对应的路径时，会渲染对应的组件到页面上。这样就实现了页面的切换。在进行页面切换时，虽然浏览器的地址栏并没有发生变化，但是其实是通过改变URL地址的方式进行的切换。

总结：
因为Vue使用了前端路由机制来实现页面跳转，通过修改浏览器的URL地址来实现页面之间的切换。这种方式可以提高用户体验，减少不必要的请求，并且不需要向后端发送请求。所以，在Vue中页面跳转时地址上不显示。

在Vue中，页面跳转时地址栏不会立即显示原因有以下几点：

1. Vue使用的是前端路由技术，它通过监听浏览器的URL变化来实现页面跳转，而不是刷新整个页面。这样可以提供更流畅的用户体验，并减少服务器的压力。因此，页面跳转时，URL并不会立即改变。

2. Vue使用的是Hash模式和History模式两种路由模式。在Hash模式下，URL中使用的是hash（#）符号，而不是真正的URL路径。这是因为浏览器不会将hash后面的内容发送给服务器，而是在前端进行处理。这样就可以防止页面跳转时向服务器发送请求，同时也保护了页面跳转的隐私。在History模式下，URL是真正的路径，但仍然不会立即改变。只有前端路由处理完毕后，才会将URL改变。

3. Vue使用了Vue Router来管理路由。在Vue Router中，使用了router-link组件来实现页面跳转。当点击了router-link组件，Vue Router会根据配置的路由规则找到对应的组件，并渲染到页面中，但URL并不会立即改变。

4. Vue的页面跳转使用了push和replace两种方式。push方式是将新的URL添加到浏览器的历史记录中，使用浏览器的后退按钮可以返回上一个页面。replace方式是替换当前的URL，不会添加到浏览器的历史记录中，使用后退按钮无法返回上一个页面。无论是push还是replace方式，URL在跳转前都不会立即改变。

5. 在Vue中，可以通过$route对象获取当前的路由信息，包括当前的URL。这样就可以在页面中获取到正确的URL路径，而不需要显示在地址栏中。

综上所述，Vue中页面跳转时地址栏不会立即显示是因为使用了前端路由技术，在URL变化之前会先进行前端处理，保护用户隐私和提供更好的用户体验。

在Vue中，页面跳转的时候地址栏上没有显示是因为Vue使用的是前端路由，而不是传统的后端路由。

传统的后端路由是基于服务器的，即在每次页面跳转时，服务器都会返回一个新的HTML页面，地址栏会随之改变。但是，在Vue中，页面跳转是基于前端路由，即在首次加载网页时，服务器只返回一个空的HTML页面，然后通过JavaScript来控制页面的渲染和跳转。

Vue使用的是一种称为"hash模式"的前端路由，默认情况下，URL会带有一个 # 符号和一个路径，例如：http://example.com/#/home。这个 # 符号后面的内容被称为哈希值，Vue会根据不同的哈希值来渲染不同的组件。

在"hash模式"下，每次进行页面跳转时，URL的改变是不会触发浏览器向服务器发送请求的，因此地址栏没有发生变化。

如果你希望在页面跳转时地址栏也能显示对应的URL，可以使用Vue提供的另一种路由模式——"history模式"。在"history模式"下，URL不再带有 # 符号，而是直接使用传统的路径，例如：http://example.com/home。

要启用"history模式"，需要对Vue的路由进行相应的配置。首先，在创建Vue实例之前，需要通过VueRouter来创建一个路由实例。在创建路由实例时，可以通过传入一个"mode"属性来指定使用的路由模式，将其设置为"history"即可。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About }
]

const router = new VueRouter({
    mode: 'history',
    routes
})

new Vue({
    router
}).$mount('#app')

注意，在使用"history模式"时，需要在服务器端进行相应的配置，以确保当用户直接访问URL时能够正确返回对应的HTML页面。

总结起来，Vue中页面跳转时地址栏没有显示是因为使用的是前端路由，而不是传统的后端路由。你可以选择使用"hash模式"或"history模式"来实现不同的需求。