VUE路由跳转详解

router-link标签跳转

运用router-link标签实现路由跳转，使用query 或者 params携带参数
path对应query，name对应params

<template>
  <div>
    <router-link :to="{path:'./first',query: {name: 'query',id:'a1'}}">query携带参数</router-link>
    <!-- 这里path使用相对路径，query携带参数 -->
    <router-link :to="{name:'second',params: {name: 'params',id:'a1'}}">params携带参数</router-link>
    <!-- 这里name使用要跳转的界面的名字，对应路由设置里的name属性，params携带参数 -->
  </div>
</template>

在router文件夹下的index.js配置路由，两个标签分别要跳转到first页面和second界面，携带参数name和id。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import first from '@/components/first'  //请记得把文件引进来，或者在component内引入
import second from '@/components/second'//请记得把文件引进来，或者在component内引入
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/first',//query传值界面，跳转界面first
      name: 'first',
      component: first
    },
    {                //params传值界面，跳转界面second
      path: '/second/:name/:id?',//问号代表可以不传id这个参数
      name: 'second',//这里的name对应标签的name
// <router-link :to="{name:'second',params: {name: 'params'}}">
      component: second
    },

  ]
})

在 first，second 页面的生命周期mounted中观察传递过来的值，这个时候数据已经生成，我们可以观察到数据。

<script>
export default {
  name: "HelloWorld",
  mounted() {
    console.log(this.$route);//不管是params还是query都是使用this.$route获取传递值
  },
  data() {
    return {};
  }
};

开始看下效果
先点击query跳转，firsrt的url显示携带的参数，即使刷新界面参数依然保留


我们可以看到携带的参数包裹在query中，所以使用this.$route.query就可以访问到,注意是route不是router！！注意是route不是router！！注意是route不是router！！

这里着重讲一下params情况，params情况，params情况，params情况，params情况！！
如下图我们在路由中配置了传递的参数，所以我们刷新界面依然可以获得参数，但是如果不配置，刷新界面就获取不了参数，而且在一开始跳转的界面，url上面也是没有参数的，你一刷新界面，url上面没有参数，this.$route里面的params也不带参数了

  {                //params传值界面
      path: '/second/:name/:id?',//问号代表可以不传name和id这两个参数
      name: 'second',
      component: second
    },

配置了的情况下点击跳转页面

这种情况下url上也会显示显示的参数，只不过不显示参数值。后台数据显示也能正常获取params。刷新界面依然可以获得参数的截图就不放上来了。

但是如果和first界面跳转一样的配置路由，不在后面设置参数

 {                //params传值界面
      path: '/second',
      name: 'second',
      component: second
    },

效果如下

控制台信息的path变了，也就是说我们看到的url后面不再跟参数了，毕竟我们已经没有在路由里面配置这些参数了。刷新界面，second拿到的参数也会失效。

既然可以使用标签实现跳转，那么函数上也提供了类似的操作。
this.$router.push，注意是router不是route哦

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods: {
    query() {
    //对应 <router-link :to="{path:'./first',query: {name: 'query',id:'a1'}}">query携带参数</router-link>
      this.$router.push({
        path: "./first",
        query: { name: "query", id: "a1" }
      });
    },
    params() {
    //对应<router-link :to="{name:'second',params: {name: 'params',id:'a1'}}">params携带参数</router-link>
      this.$router.push({
        name: "second",
        params: { name: "params", id: "a1" }
      });
    }
  }
};
</script>

总结

在router.js里面配置路由，不管你设不设置参数，使用query传参都会保留参数，即使你刷新界面，也不会丢失参数。params传参就会根据路由中是否设置了参数而有上文中相应的彼岸花。
说一个细节，query传参，你可以用path，也可以用name，但是params传参，你只能用name。
如果错误或不详尽的 欢迎补充提出哦！