tip: 用params傳參,F5強制刷新參數會被清空,用query,由於參數適用路徑傳參的所以F5強制刷新也不會被清空。(傳參強烈建議適用string)
也可以選用sessionstorage/localstorage/cookie存儲,可以參考我的另一邊文章:sessionstorage、localstorage與cookie
params:參數不會顯示到路徑上
1:配置路徑rutes
export default new Router({ routes: [ { path: '/testVueRouter', name: 'TestVueRouter', component: TestVueRouter }, { path: '/testVueRouterTo', // 一定要寫name,params必須用name來識別路徑 name: 'TestVueRouterTo', component: TestVueRouterTo } ] })
2:傳遞參數:用$router
<!-- test-vue-router頁面 --> <template> <div> <a @click="routerTo()">query傳參</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ name: `TestVueRouterTo`, params: { page: '1', code: '8989' } }) } } } </script>
3:接受參數:用$route,少個r,注意啦
<!-- test-vue-router-to頁面 --> <template> <div> </div> </template> <script> export default{ data() { return { page: '', code: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { this.page = this.$route.params.page this.code = this.$route.params.code console.log('page', this.page) console.log('code', this.code) } } } </script>
query:最好也用name來識別,保持與params一致性,好記了,路徑傳參
1:路徑配置(跟params一樣,代碼不寫了)
2:傳遞參數頁
<!-- test-vue-router頁面 --> <template> <div> <a @click="routerTo()">query傳參</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ name: `TestVueRouterTo`,
// 只是把query改了,其他都沒變 query: { page: '1', code: '8989' } }) } } } </script>
3:接受參數
<!-- test-vue-router-to頁面 --> <template> <div> </div> </template> <script> export default{ data() { return { page: '', code: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { // 只是改了query,其他都不變 this.page = this.$route.query.page this.code = this.$route.query.code console.log('page', this.page) console.log('code', this.code) } } } </script>
圖片區:
下面我們采用path: '/testVueRouterTo'
1:query(成功)
<!-- test-vue-router頁面 --> <template> <div> <a @click="routerTo()">query傳參</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ path: '/testVueRouterTo', query: { page: '1', code: '8989' } }) } } } </script>
<!-- test-vue-router-to頁面 --> <template> <div> <!-- <span>{{page}}</span> <span v-show="code === '89'">{{code}}</span> <span>{{password}}</span> --> </div> </template> <script> export default{ data() { return { page: '', code: '', password: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { // debugger this.page = this.$route.query.page this.code = this.$route.query.code console.log('page', this.page) console.log('code', this.code) } } } </script>
2:params:(不成功)
<!-- test-vue-router頁面 --> <template> <div> <a @click="routerTo()">params傳參</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ path: '/testVueRouterTo', params: { page: '1', code: '8989' } }) } } } </script>
<!-- test-vue-router-to頁面 --> <template> <div> <!-- <span>{{page}}</span> <span v-show="code === '89'">{{code}}</span> <span>{{password}}</span> --> </div> </template> <script> export default{ data() { return { page: '', code: '', password: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { // debugger this.page = this.$route.params.page this.code = this.$route.params.code console.log('page', this.page) console.log('code', this.code) } } } </script>
這是由於query與params傳參機制不一樣,造成的差異,如果要隱藏參數用params,如果強制刷新不被清除用query