vue知识点总结（五）—— 路由持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章vue知识点总结（四）—— 插槽中，我们学习了vue相关知识点，包括插槽、v-model语法糖、单页面应用程序等相关知识点。今天，在这篇文章中，vue其他的相关知识点，包括路由、前端路由工作原理、路由基本使用、声明式导航、动态路由、路由对象等相关知识点。

路由

路由是浏览器URL中的哈希值( # hash)与展示视图内容(组件)之间的对应规则。简单来说, 路由就是一套映射规则(一对一的对应规则), 由开发人员制定规则。当URL中的哈希值( # hash) 发生改变后,路由会根据制定好的规则, 展示对应的视图内容(组件)。

我们为什么需要学习路由呢？

渐进式 =>vue => vuer-router (管理组件之间的跳转)。
在 web App 中, 经常会出现通过一个页面来展示和管理整个应用的功能。
SPA 往往是功能复杂的应用,为了有效管理所有视图内容,前端路由应运而生。

vue 中的路由是hash和component的对应关系, 一个哈希值对应一个组件。

前端路由——工作模式原理

基本思路:

用户点击了页面上的路由链接。
导致了 URL 地址栏中的 Hash 值发生了变化。
前端路由监听了到 Hash 地址的变化。
前端路由把当前 Hash 地址对应的组件渲染都浏览器中。

<template>
  <div>
    <a href="#one">ONE</a>
    <a href="#two">TWO</a>
    <a href="#three">THREE</a>

    <component :is="is"></component>
  </div>
</template>

created() {
    window.onhashchange = () => {
        console.log(location.hash.slice(1))
        this.is = location.hash.slice(1)
    }
},

路由的基本使用

安装： yarn add vue-router
引入

import VueRouter from 'vue-router'
// 把路由当成插件一样安装
Vue.use(VueRouter)

实例路由对象：let router = new VueRouter()
把路由挂载到vue实例上

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

具体步骤

拿到入口哈希路径, 根据路由匹配规则,找到对应的组件,显示到对应的出口位置。

入口
规则
出口

# 1. 入口
  // 浏览器 url 地址栏 ==>    #/one   和   #/two

# 2. 路由规则
// path : 路由路径
// component : 将来要展示的路由组件
routes: [
    { path: '/one', component: One }, 
    { path: '/two', component: Two }
]

# 3. 出口
<router-view></router-view>

声明式导航

<!-- 1. 改变入口 -->
<router-link to='/one'>one</router-link>
<router-link to='/two'>two</router-link>

动态路由

基本使用。

# 入口
<router-link to="/detail/1">手机1</router-link>
<router-link to="/detail/2">手机2</router-link>
<router-link to="/detail/3">手机3</router-link>
<router-link to="/detail">手机4</router-link>  没有参数如何????


# 规则
routes: [
  // 2 . 路由规则
  { path: '/detail/:id?', component: Detail }
]

# 获取参数的两种方式
<template>
  <div>
    <h1>one {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {

   watch : {
     $route(obj){
       console.log('id：',obj.params.id); 
     }
   }
}
</script>

路由对象 —— $route

一个路由对象 (route object)表示当前激活的路由的状态信息，包含了当前URL解析得到的信息。一个哈希值路径 ==> 一个路由对象。

$route.path

类型: string

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

# 后面?前面的内容
$route.params

类型: Object

url参数对象

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

类型: Object

查询参数对象

一个 key/value 对象，表示 URL 查询参数。

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

<router-link to="/detail/4?age=21">detail</router-link>
{ path: '/detail/:id?', component: detail } 

在组件内 created打印 this.$route
> params : {id:'4'}
> query : {age : 21}
> path : '/detail/4'

嵌套路由 —— 子路由

parent 的内部添加 : <router-view> </router-view>
规则里添加 children
那么访问就应该访问#/home/one才可以访问子组件

const router = new VueRouter({
        // 2. 规则
        routes: [
          {
            path: '/home',
            component: home,
            children: [
              { path: '/one', component: one },
              { path: '/two', component: two },
            ],
          },
          { path: '/list', component: list },
        ],
      })

编程式导航

跳转的三种方式:

声明式导航: 通过导航组件跳转
编程式导航: 通过js代码来实现跳转

# push()  跳转 保留历史记录 (可返回)
	go(1)
# back()  返回
	go(-1)
# replace() 跳转 不保留历史记录 (不可返回)

// one组件
  methods: {
    jump() {
      // this.$router.push('/two')
      // this.$router.go(1)
      this.$router.replace('/two')
    },
  },
}
// two组件
  methods: {
    back() {
      // this.$router.back()
      this.$router.go(-1)
    },
  },

`$route和$router的区别`

$route : 路由对象 ( 包含了当前 URL 解析得到的信息 )
- 掌握三个属性
  - path
  - params
  - query
$router: 路由实例
- 掌握三个方法
  - push()
  - back()
  - replace()