一、通过 <router-link>
实现
官网:
表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),
所以这个值可以是一个字符串或者是描述目标位置的对象。
简单写法
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
使用v-bind的写法
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
命名的路由
即路由跳转时需要携带动态参数
<router-link :to="{ name: 'demo', params: { userId: 123 }}">Demo</router-link>
需要配置路由
{
path: '/demo/:userId',
name: 'demo',
component: demo
},
此时页面跳转的结果为 /demo/123
若要在新页面获取跟随路由传过来的参数,即123
则在新页面的mounted函数中使用
this.$route.params.userId
即可获取
带查询参数
<router-link :to="{ path: 'demo2', query: { plan: 'private' }}">
Demo2
</router-link>
此时页面跳转的结果为 /demo2?plan=private
若要在新页面获取传过来的地址键值对
则在新页面的mounted函数中使用
this.$route.query.plan
二、通过JS实现
配置路由:
{
path: '/demo/:userId',
name: 'demo',
component: demo
},
template:
<button @click="toHome">主页面</button>
script:
1.简单写法:
methods: {
toHome() {
this.$router.push("/demo");
},
}
或者
methods: {
toHome() {
this.$router.push({ path: '/demo' });
},
}
2.命名的路由(传参)
methods:{
toHome() {
this.$router.push({ name: 'demo', params: { userId: 123 }});
},
}
跳转结果与获取参数方式同router-link方法
3.带查询参数
methods:{
toHome() {
this.$router.push({ name: 'demo', params: { userId: 123 }},query: { plan: 'private' } });
},
}
三、跳转页面时打开新标签页
this.$router.resolve
template:
<button @click="toHome">主页面</button>
script:
methods: {
toHome() {
let routeData = this.$router.resolve({ name: 'demo', params: { userId: 123}});
window.open(routeData.href, '_blank')
},
}
参考文章:https://www.cnblogs.com/Leophen/p/11265833.html