vue-router 实现href
使用 Vue Router 实现类似 href 的跳转功能
在 Vue Router 中，可以通过多种方式实现类似传统 href 的页面跳转效果。以下是几种常见方法：
使用 <router-link> 组件
<router-link> 是 Vue Router 提供的组件，用于声明式导航，会渲染为 <a> 标签：
<router-link to="/about">关于我们</router-link>可以添加 tag 属性指定渲染的标签类型：
<router-link to="/about" tag="a">关于我们</router-link>编程式导航
通过 this.$router.push() 方法实现 JavaScript 跳转：
methods: {
navigateToAbout() {
this.$router.push('/about')
}
}等同于 href 的替换当前历史记录方式：
this.$router.replace('/about')在新窗口打开链接
需要在新窗口打开时，可以使用原生 window.open：
methods: {
openNewTab() {
window.open(this.$router.resolve('/about').href, '_blank')
}
}或者为 <router-link> 添加 target="_blank"：
<router-link to="/about" target="_blank">关于我们</router-link>获取当前完整 URL
需要获取当前路由对应的完整 URL 时：
const fullUrl = window.location.origin + this.$route.path动态路由跳转
带参数的动态路由跳转：
this.$router.push({ path: '/user', query: { id: '123' } })
// 生成类似 /user?id=123 的 URL或使用 params：
this.$router.push({ name: 'user', params: { id: '123' } })
// 需要路由配置中有 name: 'user' 的路由路由配置示例
确保路由配置正确：
const router = new VueRouter({
routes: [
{
path: '/about',
component: AboutComponent
},
{
path: '/user/:id',
name: 'user',
component: UserComponent
}
]
})这些方法覆盖了传统 href 的主要使用场景，同时提供了 Vue Router 特有的功能如编程式导航和命名路由。
