<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login?id=10&name=张三">登陆</router-link> //通过在路径后面直接拼接参数，进行传参是，路由规则中的path路径不需要进行更换
<router-link to="/resgiest">注册</router-link>
<router-view></router-view>
</div>
<script>
// 定义组件
var login = {
template: "<h2>登陆 ---{{this.$route.query.id}}---{{this.$route.query.name}}</h2>", //在页面中进行显示的时候this可以省略
created() { //每一个组件都有自己的生命周期函数，我们可以通过(this.$route.query来获取，在路上进行拼接的参数，，并同时进行展示，
console.log(this.$route.query.id)
console.log(this.$route.query.name)
},
}
var resgiest = {
template: "<h2>注册</h2>"
}
// 定义路由规则
var routerobj = new VueRouter({ // 这个是自己取得名字router
routes: [ //路有规则对象，为数组 里面可以放多个路由规则对象， routes没有r
{ path: ‘/‘, redirect: ‘/login‘ },
{ path: ‘/login‘, component: login },
{ path: ‘/resgiest‘, component: resgiest }
],
})
var vm = new Vue({
el: "#app",
data: {},
methods: {},
router: routerobj // 不要忘记进行挂载，是路有规则与组件进行联系
})
</script>
</body>
</html>
使用query获取的参数一般是使用？在跳转的路径后面直接进行拼接的 ，
vue中的传参方式1
原文：https://www.cnblogs.com/Progress-/p/12197945.html
