router-link新启一个页面
时间: 2023-08-18 21:14:46 浏览: 91
vue router 跳转时打开新页面的示例方法
5星 · 资源好评率100%
在 Vue.js 中使用 `router-link` 组件可以实现新启一个页面的效果。`router-link` 是 Vue Router 提供的一个组件,用于导航到不同的路由。
你可以按照以下步骤来使用 `router-link` 新启一个页面:
1. 首先,在你的 Vue 组件中导入 `router-link` 组件:
```javascript
import { RouterLink } from 'vue-router';
```
2. 然后,在模板中使用 `router-link` 组件来创建链接:
```html
<router-link to="/new-page">跳转到新页面</router-link>
```
这里的 `to` 属性指定了要导航到的路由路径,例如 `/new-page`。
3. 最后,确保你已经在 Vue Router 的路由配置中定义了 `/new-page` 的路由规则,以及对应的组件:
```javascript
import NewPage from '@/components/NewPage.vue';
const routes = [
// 其他路由规则...
{ path: '/new-page', component: NewPage }
];
```
这里的 `NewPage` 是你新页面对应的组件。
当用户点击 `router-link` 创建的链接时,Vue Router 会自动处理导航,并加载对应的组件渲染到新页面上。
希望这个回答对你有帮助!如果你还有其他问题,请继续提问。
阅读全文