1、假设有两个Vue组件，项目路由文件src/router文件夹下的index.js
import Vue from 'vue';
import Router from 'vue-router';
import officeHome from '@/view/officeHome';
import home from '@/view/home';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/officeHome',
name: 'officeHome',
component: officeHome
},
{
path: '/view/home',
name: 'home',
component: home
}
]
});2、实现简单的路由跳转------编程式（router.push(...)）
使用 router.push可以导航到不同的 URL。router.push会向 history 栈添加一个新记录，因此，当用户点击浏览器后退按钮时，则回到之前的 URL。
<template>
<div>
<el-button type="primary" @click="pushTo1">按钮1</el-button>
<el-button type="primary" @click="pushTo2">按钮2</el-button>
<el-button type="primary" @click="pushTo3">按钮3</el-button>
<el-button type="primary" @click="pushTo4">按钮4</el-button>
</div>
</template>
<script>
export default {
name: 'officeHome',
data () {
return {};
},
methods: {
pushTo1 () {
// 默认为path
this.$router.push('/view/home');
},
pushTo2 () {
this.$router.push({path: '/view/home'});
},
pushTo3 () {
this.$router.push({name: 'home'});
},
pushTo4 () {
// name 和 path 都有的情况下，以name为准
this.$router.push({name: 'home', path: '/view/home'});
}
}
};
</script>
上面四种方式点击实现路由跳转，跳转以后路由地址：
3、编程式（router.push(...)）------query传参
Vue组件：officeHome
<template>
<div>
<el-button type="primary" @click="pushTo1">按钮1</el-button>
<el-button type="primary" @click="pushTo2">按钮2</el-button>
<el-button type="primary" @click="pushTo3">按钮3</el-button>
</div>
</template>
<script>
export default {
name: 'officeHome',
data () {
return {};
},
methods: {
pushTo1 () {
this.$router.push({path: '/view/home', query: { username: 'liu', userId: 12 }});
},
pushTo2 () {
this.$router.push({name: 'home', query: { username: 'liu', userId: 12 }});
},
pushTo3 () {
// name 和 path 都有的情况下，以name为准
this.$router.push({name: 'home', path: '/view/home', query: { username: 'liu', userId: 12 }});
}
}
};
</script>
Vue组件：home
<template>
<div>
<p>用户名：{{user.username}}</p>
<p>ID：{{user.userId}}</p>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
user: {
username: '',
userId: ''
}
};
},
mounted () {
// $router为VueRouter实例，导航到不同URL，使用$router.push
console.log(this.$router);
// $route为当前router跳转对象，可以通过 $route.属性名 获取name、path、query、params等
console.log(this.$route);
console.log(this.$route.query);
this.user = this.$route.query;
}
};
</script>
注意：使用query传参，参数会显示在路由里（/view/home?username=liu&userId=12）
4、编程式（router.push(...)）------params传参，指定路由name
Vue组件：officeHome
<template>
<div>
<el-button type="primary" @click="pushTo1">按钮1</el-button>
<el-button type="primary" @click="pushTo2">按钮2</el-button>
<el-button type="primary" @click="pushTo3">按钮3</el-button>
</div>
</template>
<script>
export default {
name: 'officeHome',
data () {
return {};
},
methods: {
pushTo1 () {
// 这种指定了路由的path，没有指定路由的name，会导致params失效
this.$router.push({path: '/view/home', params: { username: 'liu', userId: 12 }});
},
// 使用params传递参数，必须指定Vue组件路由的name属性
pushTo2 () {
this.$router.push({name: 'home', params: { username: 'liu', userId: 12 }});
},
pushTo3 () {
// name 和 path 都有的情况下，以name为准
this.$router.push({name: 'home', path: '/view/home', params: { username: 'liu', userId: 12 }});
}
}
};
</script>
Vue组件：home
<template>
<div>
<p>用户名：{{user.username}}</p>
<p>ID：{{user.userId}}</p>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
user: {
username: '',
userId: ''
}
};
},
mounted () {
// $router为VueRouter实例，导航到不同URL，使用$router.push
console.log(this.$router);
// $route为当前router跳转对象，可以通过 $route.属性名 获取name、path、query、params等
console.log(this.$route);
console.log(this.$route.params);
this.user = this.$route.params;
}
};
</script>点击按钮1跳转，得到的params是一个空对象
点击按钮2 和 按钮3 跳转都可以获取到通过params传递的参数
通过指定路由的name，利用params传递参数，参数也会显示在路由里（/view/home/liu/12）
5、编程式（router.push(...)）------params传参，手写完整路由
在项目的路由配置文件中，配置组件home的路由改成如下：
{
path: '/view/home/:username/:userId',
name: 'home',
component: home
}Vue组件：officeHome
<template>
<div>
<el-button type="primary" @click="pushTo4">按钮4</el-button>
</div>
</template>
<script>
export default {
name: 'officeHome',
data () {
return {};
},
methods: {
// 使用params传递参数，写完整的带有参数的 path
pushTo4 () {
const username = 'liu';
const userId = '12';
this.$router.push({path: `/view/home/${username}/${userId}`});
}
}
};
</script>
Vue组件：home
<template>
<div>
<p>用户名：{{user.username}}</p>
<p>ID：{{user.userId}}</p>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
user: {
username: '',
userId: ''
}
};
},
mounted () {
// $router为VueRouter实例，导航到不同URL，使用$router.push
console.log(this.$router);
// $route为当前router跳转对象，可以通过 $route.属性名 获取name、path、query、params等
console.log(this.$route);
console.log(this.$route.params);
this.user = this.$route.params;
}
};
</script>
点击按钮 跳转可以获取到通过params传递的参数
通过手写完整路由，利用params传递参数，参数也会对应显示在路由里（/view/home/liu/12）