1、查询参login?id=12345

配置：（传参）:to="{name:'login', query:{id:'loginid'}}"
获取：（取参）this.$route.query.id

2、路由参数

配置：（传参）:to="{name:'login', params:{id:'loginid'}}"
获取：（取参）this.$route.params.id

3、路径参数register/registerid/info

配置：（传参）:to="{name:'register', params:{id:'registerid'}}"
配置路由规则：
routes: [{path: '/register/:id/info', name: 'register', component: Register}]
获取：（取参）this.$route.params.id

4、使用props直接取参

配置：（传参）:to="{name:'propsParams', params:{id:'propsParamsId'}}"
配置路由规则：
routes: [
// 通过props传值
{path: '/propsParams', name: 'propsParams', props: true, component: PropsParams}]
获取：（取参）

var PropsParams = { template: ` <div>传参直接取值 <br> 直接拿到ID:{{id}} </div> `, // 直接通过props取参 props: ['id'] }5、通过JS进行传参

this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})

代码示例：

query传参：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><script type="text/javascript"> var Login = { template: ` <div>登陆了 <br> 登陆ID:{{msg}} </div> `, data() { return { msg: '' } }, created() { this.msg = this.$route.query.id } } // 安装插件 Vue.use(VueRouter); // 创建路由对象 var router = new VueRouter({ // 配置路由对象 routes: [{path: '/login', name: 'login', component: Login} ] }) new Vue({ el: '#app', router, template: ` <div> <router-link :to="{name:'login', query:{id:'loginid'}}">query传参</router-link> <router-view></router-view></div> ` } )</script></body></html>

params传参

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><script type="text/javascript"> var Register = { template: ` <div>注册了 <br> 注册ID:{{msg}} </div> `, data() { return { msg: '' } }, created() { this.msg = this.$route.params.id } } var PathParams = { template: ` <div>路径传参 <br> 路径ID:{{pat}} </div> `, data() { return { pat: '' } }, created() { this.pat = this.$route.params.id } } // 安装插件 Vue.use(VueRouter); // 创建路由对象 var router = new VueRouter({ // 配置路由对象 routes: [ {path: '/register', name: 'register', component: Register} ] }) new Vue({ el: '#app', router, template: ` <div> <router-link :to="{name:'register', params:{id:'registerid'}}">params传参</router-link> <router-view></router-view></div> ` } )</script></body></html>

params路径传参

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><script type="text/javascript"> var Register = { template: ` <div>注册了 <br> 注册ID:{{msg}} </div> `, data() { return { msg: '' } }, created() { this.msg = this.$route.params.id } } var PathParams = { template: ` <div>路径传参 <br> 路径ID:{{pat}} </div> `, data() { return { pat: '' } }, created() { this.pat = this.$route.params.id } } // 安装插件 Vue.use(VueRouter); // 创建路由对象 var router = new VueRouter({ // 配置路由对象 routes: [ {path: '/register/:id/info', name: 'register', component: Register} ] }) new Vue({ el: '#app', router, template: ` <div> <router-link :to="{name:'register', params:{id:'registerid'}}">path传参</router-link> <router-view></router-view></div> ` } )</script></body></html>

params使用props直接取参

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><script type="text/javascript"> var PropsParams = { template: ` <div>传参直接取值 <br> 直接拿到ID:{{id}} </div> `, // 直接通过props取参 props: ['id'] } // 安装插件 Vue.use(VueRouter); // 创建路由对象 var router = new VueRouter({ // 配置路由对象 routes: [ // 通过props传值 {path: '/propsParams', name: 'propsParams', props: true, component: PropsParams} ] }) new Vue({ el: '#app', router, template: ` <div> <router-link :to="{name:'propsParams', params:{id:'propsParamsId'}}">传参直接取值</router-link> <router-view></router-view></div> ` } )</script></body></html>

js传参

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><script type="text/javascript"> // 安装插件 Vue.use(VueRouter); // 创建路由对象 var router = new VueRouter() // 创建路由对象 new Vue({ el: '#app', router, template: ` <div> <button @click="goLogin">JS跳转登录页面</button></div> `, methods: { goLogin() { // 使用js路由跳转貌似只能使用query传参 this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}}) } } } )</script></body></html>

fullPath路由全路径监听

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><script type="text/javascript"> var Login = { template: ` <div>登陆了 <br> 登陆ID:{{msg}} </div> `, data() { return { msg: '' } }, created() { this.msg = this.$route.query.id } } // 安装插件 Vue.use(VueRouter); // 创建路由对象 var router = new VueRouter({ // 配置路由对象 routes: [ {path: '/login', name: 'login', component: Login} ] }) new Vue({ el: '#app', router, template: ` <div> <router-link :to="{name:'login', query:{id:'loginid'}}">query传参</router-link> <button @click="goLogin">js跳转</button> // js跳转和标签跳转同一页面,路由相同而参数不同页面ID不刷新问题 // 使用全路径监听fullPath <router-view :key="$route.fullPath"></router-view></div> `, methods: { goLogin() { this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}}) } } } )</script></body></html>

完整代码示例：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><script type="text/javascript"> var Login = { template: ` <div>登陆了 <br> 登陆ID:{{msg}} </div> `, data() { return { msg: '' } }, created() { this.msg = this.$route.query.id } } var Register = { template: ` <div>注册了 <br> 注册ID:{{msg}} </div> `, data() { return { msg: '' } }, created() { this.msg = this.$route.params.id } } var PathParams = { template: ` <div>路径传参 <br> 路径ID:{{pat}} </div> `, data() { return { pat: '' } }, created() { this.pat = this.$route.params.id } } var PropsParams = { template: ` <div>传参直接取值 <br> 直接拿到ID:{{id}} </div> `, props: ['id'] } // 安装插件 Vue.use(VueRouter); // 创建路由对象 var router = new VueRouter({ // 配置路由对象 routes: [{path: '/login', name: 'login', component: Login}, {path: '/register', name: 'register', component: Register}, // 路径传参 {path: '/pathParams/:id/info', name: 'pathParams', component: PathParams}, // 直接取 {path: '/propsParams', name: 'propsParams', props: true, component: PropsParams} ] }) new Vue({ el: '#app', router, template: ` <div> <router-link :to="{name:'login', query:{id:'loginid'}}">query传参</router-link> <router-link :to="{name:'register', params:{id:'registerid'}}">params传参</router-link> <router-link :to="{name:'pathParams', params:{id:'123456'}}">path传参</router-link> <router-link :to="{name:'propsParams', params:{id:'propsParamsId'}}">传参直接取值</router-link> <button @click="goLogin">JS跳转登录页面</button> <router-view :key="$route.fullPath"></router-view></div> `, methods: { goLogin() { this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}}) } } } )</script></body></html>