简单学习梳理vue中的 router 和 route1. Vue-router中的 push 和 replace的区别

1. Vue-router中的 push 和 replace的区别

1.this.$router.push()
描述: 跳转到不同的url,但是这个方法会向history栈添加一个记录,点击后会返回到上一个页面。
1. this.$router.replace() 描述: 同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
1. this.$router.go(n) 相当于当前页面向前或者向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数,正数返回上一个页面。

2.Vue里router 和 route 的区别

在Vue项目中一般都会用到路由,其中vue-router是vue官方的路由管理器。 this.$route: 当前激活的路由的信息对象。每个对象都是局部的,可以获取当前路由的path,name,params,query等属性。

this.$router: 全局的router实例。通过vue根实例中注入router实例,然后再注入到每个子组件,从而让整个应用都有路由功能。其中包含了很多属性和对象(比如history对象),任何页面也都可以调用其push(),replace(),go()等方法。

3.路由跳转分为哪两种?简单说说

路由跳转分为编程式和声明式

声明式:
1.简单来说,就是使用router-link组件来导航,通过传入to属性指定链接(router-link默认会被渲染成一个a标签)。
2.当需要造一个页面中嵌套子路由,并且页面不跳转的时候,只需要将子页面渲染在router-view里面就可以了。
编程式:
采用这种方式就需要导入VueRouter并调用了。

// 注

Vue-router 的使用步骤(采用编程式方式):
1.定义两个路由跳转的单 .vue组件: home.vue 和 user.vue
2.导入vue,vue-router 并定义路由每个路由包含一个component属性这个属性映射一个组件 --- router.js

import Vue from 'vue'
import Router from 'vue-router'

import Home from './home.vue'
import User from './user.vue'

Vue.use(Router);

3.创建 router 实例，并传递 routes 配置 --- router.js

const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
]

const router = new Router({
    routes
})

4.在 vue 根实例中注入路由，这样就可以在其他任何组件中访问路由了 --- main.js

import router from './router'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

大体步骤如上所示

在上面 user 和 home 组件内访问路由有两种方式: this. $route 和 this.$ router。这两种方式使用起来大致一样，但还是有区别。（以下显示的）

可以看到this.$route 显示了当前激活的路由的信息对象。这个对象是局部的，可以获取当前路由的 path, name, params, query 等属性。

其中$route.matched是一个数组，包含了当前路由的所有嵌套记录，即 routes 配置中的对象数组，包括自己的信息和 children 数据。比如这里的 routes 配置为：

const router = new VueRouter({
  routes: [
    // 下面的对象就是路由记录
    {
      path: '/taskList',
      component: TaskList,
      name: '任务列表',
      children: [
        {
          path: '/taskDetail',
          component: TaskDetail,
          name: '任务详情'
        }
      ]
    }
  ]
})

得到的 this.$route 中 matched 展开结果为：

比如用导航守卫做登录功能时，若需要检测 meta 来判断是否需要登录的情况时，就可以通过遍历 $route.matched 来检查路由记录中的 meta 字段。

此外，在 vue 实例内部，还可以通过this. $router访问路由实例，它是一个全局的路由实例，通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。在任何子组件中打印 this.$ router 得到如下：

其中包含了很多属性和对象（比如 history 对象,任何页面也都可以调用其 push(), replace(), go() 等方法。

4.路由传参的几种方式

编程式导航传参

1.通过query传参
this.$router.push('/login?name="落花"&age=18')

// 编程式导航 query传参的两种方式: 
(1) 配合路由name
this.$router.push({
  name:'login',
  query: {
      name: "落花",
      id: 123
  }
})
     
     
(2) 配合路径
this.$router.push({
  path:'/login',
  query: {
      name: "落花",
      id: 123
  }
})

其他组件获取参数:  this.$route.query.name



2.通过params传参
通过params传参 必须通过命名路由的方式传参!!!  
this.$router.push({
   name:'login',
   params: {
      name:"落花",
      age: 18
   }
})

其他组件获取参数: this.$route.params.name

小结:  
1. name传参  可以传query 也可以传params
2. path传参  只能配合query传参 会忽略掉params参数
3. params只能配合name传参   特点: (1)配合name刷新页面参数会丢失  (2)路径不会显示参数

声明式导航的 router-link 传参

声明式导航里的router-link
当我们点击 <router-link to=' ... ' /> 时等同于调用了 this.$router.push()。

this.$router.push() 方法的参数可以是一个字符串路径，或则是一个地址对象，例如：
this.$router.push('login')  , this.$router.push({path: '/login'})

也可以携带参数，但是要注意：如果提供了 path， params 会被忽略，例如：

this.$router.push({path: '/login', params: { name: "落花"}}) 这里的params会被忽略

同样的规则也适用于 router-link 的 to 属性

可以使用以下几种方法：

this.$router.push({path: `/login/${ name="落花" }`})
this.$router.push({name: 'login', params: { name: "落花"}})
this.$router.push({path: 'login', query: { name: "落花"}})

这几种方法获取参数的方式：this.$route.params.name / this.$route.query.name

声明式导航的动态路径传参

路由对象提前配置:    path:'/path/:name'
:name就是配置好的参数名   (动态)

配置多个参数名: 
1. path:'my/:name/:age'
2. 传值:  /my/姓名/18

传值: /path/参数值
接收  this.$route.params.参数名
刷新页面也不会丢失数据