vue-router的总结

vue-router中文官网

一、基本配置

• 1、安装

  npm install vue-router

• 2、项目中基本配置

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  Vue.use(VueRouter)

• 3、设置路由钩子函数

  // 路由配置
  const router = new VueRouter({
    mode: 'history',
    routes: Routers,
    linkActiveClass: 'active',
    linkExactActiveClass: 'active',
  });
  
  router.beforeEach((to, from, next) => {
    ...
    next();
  });
  
  router.afterEach((to, from, next) => {
    ...
    window.scrollTo(0, 0);
  });

• 4、使用

  new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App)
  });

二、关于url几个概念的介绍

• 1、query参数:

  http://localhost:8080/#/test2?id=word问号后面的参数

• 2、params参数

  http://localhost:8080/#/test1/1类似1这样的

三、路由跳转的几种方法

• 1、直接在写

  **路由配置**
  {
    path: '/test1/:number', // :number表示传递的params参数
    name: 'test1',
    component: test1,
    props: true
  },
  

  **页面跳转**
  <router-link to="/test1/1">普通传参数到test1页面</router-link> <br/>

• 2、动态配置query传参

  **路由配置**
  {
    path: '/test2',
    name: 'test2',
    component: test2,
  },

  <router-link :to="{path: 'test2', query: {id: 'hello'}}">普通传参数到test2页面</router-link><br/>

• 3、动态配置params传参

  **路由配置**
  {
      path: '/test3',
      name: 'test3',
      component: test3,
  },

  **注意这里要写name不是path**
  <router-link :to="{name: 'test3', params:{id:123}}">普通传参数到test3页面</router-link>

• 4、页面点击按钮跳转方式

  <button @click="gototest2">点击跳转到test2</button><br/>

  methods: {
      gototest2() {
        this.$router.push({
          name: 'test2',
          query: {
            id: 'word'
          },
          params: {
            'gender': '男'
          }
        })
      }
  }

四、在组件中获取传递过来的参数

• 1、直接获取

  mounted () {
    console.log(this.$route)
  }

五、说明

毕竟通过路由传递过去的值是有限的,如果传递的比较多可以考虑重新请求接口或者走本地存储的方式