VueRouter基础知识记录1

学习笔记记录

有点乱，凑合看

---

VueRouter

1. 定义路由的规则，是一个数组对象
2. 实例化路由对象, 使用new VueRouter()生成一个 router 实例

let router = new VueRouter({
	 // 路由实例的配置项，主要是一个 routes 选项，这个选项就是路由规则
})

3. 实例化Vue根组件时，也就是 new Vue() 的时候，需要配置 router 选项，选型的值 就是上一个步骤中
   生成VueRouter的实例

      这时访问页面会发现url地址就会出现 # 号了    
      GET #/
   

4. 需要在某个位置，放置一个 路由视图（路由坑，就是用来填充匹配的路由页面组件的一个东西）
   路由视图本身是 VueRouter 提供的一个全局的组件 router-view

     这时url地址与某个路由规则匹配时，就会将相应的路由页面组件渲染到这个 router-view 上
   
     GET #/home  home组件渲染路由视图
     GET #/list  list组件渲染路由视图
     GET #/about about组件渲染路由视图
   

注意：
路由页面组件，在 VueDevtools 看的时候，名字不太好记忆。
所以推荐，任何组件都设置一个 name 的选项。这个选项就是给
组件取个名字

路由模式

Vue 中 路由有两种不同的模式

1. hash 模式 （默认模式）

2. hisotry 模式

如何切换模式呢

new VueRouter() 的时候，配置 mode 选项就可以切换模式

两种模式有何区别：（！！！！重要！！！！）

hash模式与history模式的区别

1. url地址表现不同，hash模式有#号，history模式没有
2. 实现原理不同，
   1. hash模式是通过改变hash并监听hashchange事件
   2. history模式是基于最新的HTML5里面history相关的api进行的一些操作
   history.pushstate()
   history.replacestate()
   window.onpopstate 监听浏览器的前进与后退的行为
3. 兼容性不同
   1. hash模式都可以兼容
   2. history模式只能兼容到IE10及以上
   ps: vue的兼容性，是只能兼容到ie8
4. history模式会出现404找不到页面这种问题。需要后端配置相关的处理才行。而hash模式没有这个问题
5. history模式时，重定向会有些问题，需要页面的名字叫index.html才行

router-link

概念和作用

与 router-view 一样，都是引入了 vue-router 之后，提供的全局组件
router-link的作用就是实现路由的跳转（url的跳转）
它本质上就是一个a标签。我们推荐使用它，而不是去用a标签来跳转

语法：

 <router-link to="/home">home</router-link>

to 属性是必须的。用来设置点击时跳转到哪里。

使用 router-link 比 普通 a 标签好在哪里？

1. 路径不需要去写 # 号了。它会根据当前路由的模式来决定最终渲染出去的a标签的href属性有没有
   # 号。
   刚开始做项目时，用的hash模式，然后跳转都用的a标签。
   后面老板让你将 hash模式换成history模式，这时你会很辛苦。
2. 能够很方便的去实现高亮效果
   默认情况下，当前的路由地址与某个router-link的to属性匹配时，会给渲染出去的a元素添加上两个classs
   1. router-link-exact-active
   2. router-link-active

 这时，
方案一、只需要去设置一下这两个类中的某个类的样式就可以了
方案二、设置 router-link 组件的 active-class 属性，属性值为某个class名字
         1. 希望默认的 router-link-active    => active
              active-class="active"
        2. 希望默认的 router-link-exact-active => exact-active
               exact-active-class="exact-active"

动态路由

/home/:xxxx/:yyyy

场景：详情页面
需求： 详情页面中显示当前商品信息

1. 先提供一个详情页面的路由页面组件
2. 考虑url地址如何匹配的问题 /detail/:id
3. 详情页面组件先获取到当前的商品id
4. 根据商品ID去请求对应的商品的详情接口

猜你喜欢，在a商品中有b商品的入口，从a进入b的bug：类似 /detail/3 => /detail/1 的时候，也可以说从a商品详情页去到b商品详情页的时候。vue路由发现你只是动态路由参数变了。这时vue为了高效。将详情页的路由页面组件给复用了。 复用导致的问题，就是不销毁也不会重建。由于不会重建所以没有触发 created 中的请求。

解决方法：
vue-router

1. 监听 $route 当前匹配的路由信息对象
2. 使用 路由守卫 beforeRouteUpdate()

嵌套路由

vue-router

// 1. 定义路由页面组件(不是全局注册也不是局部注册，只是提供组件的配置选项对象即可)

      // 2. 实例化路由的实例对象
      const router = new VueRouter({
        // 路由规则
        routes: [
          {
            path: "/",
            // 重定向，值设置为一个要重定向到的路径
            redirect: "/index/home",
          },
          {
            path: "/detail/:id",
            component: detail,
          },
          {
            path: "/index",
            component: index,
            children: [
              // 注意，
              // 1. 子路由的path属性前面不要写 /
              // 2. 访问子路由的时候，需要带上她父亲的路由前缀
              // GET /index/home
              {
                path: "home",
                component: home,
              },
              // GET /index/list
              {
                path: "list",
                component: list,
              },
              // GET /index/about
              {
                path: "about",
                component: about,
              },
            ],
          },
        ],
      });

      // 3. 在 new Vue() 时，配置 router 选项，选项值就是 路由实例对象
      var vm = new Vue({
        el: "#app",
        router,
      });

this.$router、this.$route

this.$router

this.$router： 获取到的时候router实例
使用这个对象的一些方法来进行路由的跳转

this.$router.push()

1. 就相当于普通的 router-link
   2. 它的参数可以是：
   1. 字符串，要跳转到路由的path
   2. 对象，对象中配置 path 属性。

[空白页, home,] => push('/list') => [空白页, home, list]

this.$router.replace()

1. 就相当于带有 replace 属性 的 router-link
   2. 它的参数可以是：
   1. 字符串，要跳转到路由的path
   2. 对象，对象中配置 path 属性。

[空白页, home,] => replace('/list') => [空白页, list ]

• this.$router.back() 后退 history.back()
• this.$router.go(num) 前进或后退，根据传递参数是正数还是负数来决定 history.go()
• this.$router.forward() 前进 history.forward()

this.$route

$route是使用了路由插件之后，路由给当前的所有组件的data选项中注入了一个‘$route 对象，这个对象代表着当前匹配的路由信息对象`。这个对象中有
很多的属性：

• path 路由路径
• query 当前路由的？号传递过来的参数，是个对象。类似express中 req.query 获取的东西
• params 当前路由的动态参数的传递，是个对象。 类似express中 req.params 获取的东西
• fullPath 当前路由的一个完整路径，包含有？号参数的
• meta 当前路由的元信息。是个对象。 是一开始定义路由规则的时候在 meta 配置中设置的内容

$route 与 $router 的区别

• $route 是当前匹配的路由信息对象，可以通过他获取一些当前路由的一些信息。比如 params 动态参数。vue 将 $route 挂到了每个组件的 data 数据里面。
• $router 就是 new VueRouter() 生成的那个实例对象，vue 将他挂载到了 Vue 的原型上面，所以每个组件都通过访问，然后使用来完成编程式导航的一些操作

编程式导航

声明式	编程式
< router-link :to=“…”>	router.push(…)

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

命名路由

就是在设置路由规则的时候，提供一个name属性。这个属性的值，后续可以用来实现 跳转

const router = new VueRouter({
        // 路由规则
        routes: [
          {
            path: "/home",
            name: "a",
            component: home,
          },
          {
            path: "/list",
            name: "b",
            component: list,
          },
          {
            path: "/about",
            name: "c",
            component: about,
          },
        ],
      });

路由组件传参

vue-router