Vue-Router 之 1 route 和 router

• this.$route： 当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。
• this.$router：全局的 router 实例。通过 Vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。

1. $route 对象

1.1 $route 表示(当前路由信息对象)

表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。

路由信息对象：即$router会被注入每个组件中，可以利用它进行一些信息的获取。

$route.path     字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

$route.params   一个 key/value 对象，包含了 动态片段 和 全匹配片段，
                如果没有路由参数，就是一个空对象。

$route.query    一个 key/value 对象，表示 URL 查询参数。
                例如，对于路径 /foo?user=1，则有 $route.query.user == 1，
                如果没有查询参数，则是个空对象。

$route.hash     当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点

$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。

$route.matched  类型:Array<RouteRecord>数组
                包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$route.name     当前路径名字

$route.meta     路由元信息

1.2 route object 出现在多个地方:

• 在组件内，即 this.$route

• 在 $route 观察者回调内 router.match(location) 的返回值

• 导航守卫的参数：

  router.beforeEach((to, from, next) => {
    // to 和 from 都是 路由信息对象
  })
  watch: {
    $route(to, from) {
       // to 和 from 都是 路由信息对象
    }
  }

2. $router 对象

全局的路由实例，是router构造方法的实例。

在 Vue 实例内部，你可以通过 $router 访问路由实例

const router = new Router({
  routes: [
    {
      path: "/",
      name: "首页",
      redirect: '/home'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    { path: '*', component: NotFoundComponent }
  ],
  linkActiveClass: "active-router",
  linkExactActiveClass: "exact-router"
})

2.1 全局挂载路由实例

// 全局注册的路由
Vue.use(VueRouter)

2.2 路由实例方法 $router.push

// 1. 不带参数
this.$router.push('/home')
this.$router.push({ name:'home' })
this.$router.push({ path:'/home' })

// 2. query传参 , 变成 /home?id=1
this.$router.push({ name:'home',query: { id:'1' }})
this.$router.push({ path:'/home',query: { id:'1' }})
// // 带查询参数，
// html 取参 $route.query.id
// script 取参 this.$route.query.id

//3. params传参
this.$router.push({ name:'home',params: { id:'1' }}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id

//4. query和params区别
//query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
//params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

push方法其实和 <router-link :to="..."> 是等同的。

注意：push 方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

2.3 路由实例方法 $router.go

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

2.4 路由实例方法 $router.replace,用法同 $router.push

// push方法会向 history 栈添加一个新的记录
// replace方法是替换当前的页面，不会向 history 栈添加一个新的记录
<router-link to="/05" replace>05</router-link>

// 一般使用replace来做404页面
this.$router.replace('/')

router-link

1. 不带参数
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
2.带参数
<router-link :to="{name:'home', params: {id:1}}"> 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}"> 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id