vue中的路由跳转和传参

一：注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push（"路由地址"）来跳转到目标路由页面；

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

所以在vue中的跳转分为

1.编程式导航（router.push(...)）

2.声明式导航（<router-link :to="...">）

二：路由的具体使用流程：
      1.在项目里面下载自己需要的路由版本，或者在创建项目的时候选择路由选项

yarn add   vue-router@4

npm install vue-router@4

      2.在项目里面创建一个router文件夹，里面创建一个router.js文件

     

      3.router.js里面的内容

import Router from "vue-router";   //引入vue-router文件
import Vue from "vue"              //引入vue文件
import Hellow from "../components/Hellow.vue";  //引入需要跳转的组件Hellow
import Hi from "../components/Hi.vue";          //引入需要跳转的组件Hi
import sonOne from "../components/children/son1.vue";  引入需要跳转的组件sonOne
Vue.use(Router)                    //挂载router
const routes = [{
  //默认显示的首页
  path: "/",
  //路由重指向，指向hellow页面
  redirect: "/hellow"
}, {
  path: '/hellow',      //一级路由路径前面加上"/"
  name: "hellow",
  component: Hellow    //组件名字要和引入组件放入名字一样
}, {
  path: "/Hi",
  name: "hi",
  component: Hi,
  //嵌套路由,儿子路由（注意儿子路由前面不要写"/",要不就是一级路由了）
  children: [{           //声明孩子路由需要用children
    path: "sonOne",
    name: "sonOne",
    component: sonOne
  }]
}]
const router = new Router({ routes })  //创建一个实例
export default router     //导出实例

    4.在main.js里面

import Vue from 'vue'
import App from './App.vue'
import router from "./router/router";  //引入router.js文件
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router                //挂载在vue实例上
}).$mount('#app')

5.在vue.app文件里面或者目标文件里面

<template>
  <div id="app">
    <van-button type="info" @click="wap">点击跳转HI</van-button>
    <!-- loaction跳转地址栏刷新 -->
    <van-button type="info" onclick="location='/'">点击跳转Hellow</van-button>
    <!-- 用router-link进行跳转，地址栏不需要刷新 -->
    <!-- <div class="vbutton"><router-link to="/hellow">点击跳转</router-link></div> -->
     <!--router-view 路由显示-->  
 <router-view></router-view>
  </div>
</template>

<script>
import { Button } from 'vant'
export default {
  name: 'App',
  methods: {
    wap() {
             //路由跳转，hi这个是一级路由跳一级路由，比如跳二级路由的话路径是（'/hi/son'）
      this.$router.push('/hi')
    },
  },
  components: {
    [Button.name]: Button,
  },
}
</script>

6.路由传参

<template>
  <div>
    <button @click="goto">点击去son1query</button>
    <button @click="go">点击去son1params</button>
         <!--俗称问号传参，在目标页面用this.$route.query.参数  获取参数-->
    <router-link to="/hi/sonOne?nameid=232425&name=张三">点击</router-link>
    <br />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'DemoHi',

  mounted() {},

  methods: {
    goto() {
      //使用 query查询参数的时候在页面使用path引入
      this.$router.push({ path: '/hi/sonOne', query: { useId: '123456' } })
    },
    go() {
      //使用params查询参数的时候在页面使用name引入，在router.js里面配置的路由的name
      this.$router.push({ name: 'sonOne', params: { useID: 789 } })
    },
  },
}
</script>

7.目标页面的接受参数

<template>
  <div>
    <h3>{{ID}}</h3>
  </div>
</template>

<script>
export default {
  name: 'DemoSon1',
  data() {
    return {
      ID: '我是Hi传过来的参数',
    }
  },
  mounted() {},
   //页面初始化后
  created() {
    //获取query传参，另外注意是！！！  this.$route不是this.$router  ！！！
    const q = this.$route.query.useId
    // 获取params传参
    const IDD = this.$route.params.useID
    //这个是获取html里面的router-link里面的  ？后面传的参数
     const name = this.$route.query.name
    const nameid = this.$route.query.nameid
  },
}
</script>

  8.暂时常用的就这么多，别的暂时想不起来。另外我自己练的小练习的地址（可以克隆下来）http://git@gitee.com:xuexudong/routing-details.git

  欢迎大佬们评价补充