配置：（传参）:to="{name:'login', query:{id:'loginid'}}"
获取：（取参）this.$route.query.id
配置：（传参）:to="{name:'login', params:{id:'loginid'}}"
获取：（取参）this.$route.params.id
配置：（传参）:to="{name:'register', params:{id:'registerid'}}"
配置路由规则：
routes: [{path: '/register/:id/info', name: 'register', component: Register}]
获取：（取参）this.$route.params.id
配置：（传参）: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'] }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>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
