Vue Router 学习 页面跳转以及传参

---

---

跳转页面传递数据

---

• router-link 方式:

○ Home.vue：

<template>
  <div>
     <router-link to="/detail/123">跳转详情页</router-link>
  </div>
</template>

○ index.js 或 router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Test from '@/components/Test'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      component: () => import(/* webpackChunkName: "about" */ './components/Detail.vue')
    }
  ]
})

○ Detail.vue：

<script>
export default {
  created () {
    console.log(this.$route.params); // {id: "123"}
    console.log(this.$route.query); // {}
  }
}
</script>

---

• router.push 方式:

○ Home.vue

<template>
  <div>
    <div @click="jumpDetail">跳转详情页</div>
  </div>
</template>

<script>
export default {
    name: 'Home',
    methods: {
       jumpDetail: function () {
          this.$router.push({
            path: '/detail',
            query: {
              dzm: "xyq"
            }
          })
       // 直接跳转，不带参数
       // this.$router.push('/detail')
       }
    }
}
</script>

○ index.js 或 router.js: 跟上面的一样，无更改。

○ Detail.vue：

<script>
export default {
  created () {
    console.log(this.$route.query); // {dzm: "xyq"}
    console.log(this.$route.params); // {}
  }
}
</script>

○ 新开窗口打开链接：

let routeData = this.$router.resolve({ path: '/home', query: {  id: 1 } });
window.open(routeData.href, '_blank');

○ 还有一点就是上面路由的两种导入方式：

component: Home

○ 与

component: () => import(/* webpackChunkName: "about" */ './components/Detail.vue')

○ 的区别就是，就是一个是异步的一个是同步的，打比方说就是每个页面有一个js文件，只要用上面那种方式加入路由的会在第一次请求网页的时候全部返回所有js，但是下面那种会只有在用到这个页面的时候才会去拿属于它的js，不用到它是不会去拿回它所用到的js的，上面那种就会不管用不用全部一次拿回来，所以两种就可以更具页面需求以及加载情况去合理的配合使用。