vue router获取url

要获取当前页面的 URL，可以使用 Vue Router 的 $route 对象。$route 包含了当前路由的信息，包括路径、参数、查询等。

例如，要获取当前页面的完整 URL，可以使用：

this.$route.fullPath

要获取当前页面的路径，可以使用：

this.$route.path

如果当前页面有查询参数，可以使用：

this.$route.query

如果需要获取参数，可以使用：

this.$route.params

需要注意的是，$route 对象在组件实例化之后才会被创建，因此在组件的 created 钩子函数中使用 $route 时要注意它可能还没有被创建。可以在 mounted 钩子函数中使用 $route 来获取当前页面的 URL。

相关问题

vue router 传参后 刷新页面url参数消失

在Vue Router中，当我们使用query传递参数时，参数会被添加到URL的查询字符串中。但是，当我们刷新页面时，这些参数会丢失，因为它们不会被保存在浏览器的历史记录中。为了解决这个问题，我们可以使用路由的params属性来传递参数，这样参数就会被保存在浏览器的历史记录中，即使刷新页面也不会丢失。

以下是使用params传递参数的示例代码：

1.定义路由：

const router = new VueRouter({
 routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

2.在组件中使用$router.push方法传递参数：

this.$router.push({ path: '/user/' + userId })

3.在组件中使用$route.params来获取参数：

export default {
 created () {
    const userId = this.$route.params.id
    // 根据userId获取用户信息
  }
}

vue router使用

Vue Router是Vue.js官方提供的路由管理器。通过创建一个router对象，我们可以实现路由跳转和路由的重定向。在使用Vue Router时，我们可以通过<router-link>和<router-view>标签来进行路由的使用和展示。其中，<router-view>是一个组件的名称，当url匹配到对应的路径时，对应的组件会被渲染到<router-view>标签中。

在Vue Router的基本配置中，我们可以创建路由组件和配置路由。首先，我们需要创建一个路由组件，比如一个名为Page的组件。然后，我们可以创建一个routes数组，其中包含了我们的路由配置，比如{ path: "/page", component: Page }。最后，我们可以创建一个router对象，将routes配置传入其中。

在Vue Cli中使用Vue Router时，有多种配置方式可供选择。你可以自己手动配置路由，也可以直接使用Vue Cli提供的脚手架工具来安装并配置Vue Router。无论使用哪种方式，你都可以将router对象放在Vue实例中，并通过this.$router来获取router对象进行操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [VueRouter的使用](https://blog.csdn.net/m0_56232007/article/details/118412371)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue-router使用](https://blog.csdn.net/weixin_41223530/article/details/120672295)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]