Vue项目实现页面跳转

一、通过 <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