vue中的路由跳转和传参

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

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

当你点击 时，内部会调用这个方法，所以点击 相当于调用 router.push(...) ：

所以在vue中的跳转分为

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

2.声明式导航（）

二：路由的具体使用流程：
      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文件里面或者目标文件里面

6.路由传参

7.目标页面的接受参数

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

  欢迎大佬们评价补充