router获取当前路径
时间: 2023-10-18 10:11:21 浏览: 41
要获取当前路径,可以使用`window.location.pathname`属性。它返回URL中路径部分的字符串,不包括主机名、端口号、查询字符串和哈希值。例如,如果当前URL为`https://www.example.com/foo/bar?param=value#hash`,则`window.location.pathname`将返回`/foo/bar`。如果你想在JavaScript中获取当前路径,可以使用以下代码:
```javascript
var path = window.location.pathname;
console.log(path);
```
这将在控制台中输出当前路径的字符串。
相关问题
vue获取当前router路径
你可以使用 Vue Router 的 `this.$route.path` 属性来获取当前的路由路径。这个属性会返回当前路由的路径字符串,可以在组件中直接访问。下面是一个示例:
```javascript
export default {
mounted() {
console.log(this.$route.path); // 输出当前路由路径
}
}
```
这段代码将在组件挂载时打印出当前的路由路径。你也可以在其他地方使用 `this.$route.path` 来获取当前路由路径。
vue router如何获取路径参数
在 Vue Router 中,可以使用 `$route.params` 对象来获取路径参数。`$route.params` 是一个对象,它包含了当前路由的动态路径参数,这些参数在路由路径中以冒号开头。例如,如果你的路由路径是 `/user/:id`,那么 `$route.params.id` 就对应着用户的 ID。下面是一个示例代码:
```javascript
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
```
在上面的示例中,当路由匹配到 `/user/123` 路径时,`$route.params.id` 的值就是 `123`。你可以根据路由参数的值来动态地渲染组件内容,实现不同的页面展示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)