Vue-Router

Vue Router官方介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

安装和使用

1.直接使用

// 1. 下载下来直接使用
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

// 2. CDN的方式
https://unpkg.com/vue-router/dist/vue-router.js
上面的链接会一直指向在NPM发布的最新版本。你也可以像https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。

2.NPM

// 安装
npm install vue-router

// 使用
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

路由的两种工作模式

1. 对于一个url来说，什么事hash值？— 就是#后面的内容
2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器
3. hash模式：
   • 地址中带有#号，不够美观。
   • 若以后将地址通过第三方手机APP分享，若APP校验严格，则地址会被标记为不合法。
   • 兼容性好，老的浏览器也基本没有问题。
   • 应用部署上线发布以后，不需要后端再去生成后端路由
4. history模式
   • 美观
   • 兼容性和hash模式相比，相对较差
   • 应用部署上线，需要后端人员支持，配置后端路由，解决刷新页面404的问题
5. 使用方式

   mode: "history"    // 默认是hash模式
   

路由的两种传参方式

1.query

// 传递参数

// to的字符串写法
<router-link :to="`/home?id=${id}&name=${name}`"></router-link>

// to的对象写法
<router-link
    :to="{
        path: '/home',
        query: {
            id: 111,
            name: '景天'
        }
    }"
</router-link>
// 不使用`<router-link>`发生跳转
this.$router.push({
    name: 'home',
    query: { 
        id: 11111,
        name: '景天'
    }
})

// 接收参数
$route.query.id
$route.query.name

2.params

// 传递参数

// to的字符串写法
<router-link :to="`/home/${id}/${name}`"></router-link>

// to的对象写法
<router-link
    :to="{
        name: 'home',   // 注意，params传值，只能使用name，不能使用path
        params: {
            id: 111,
            name: '景天'
        }
    }"
</router-link>
// 不使用`<router-link>`发生跳转
this.$router.push({
    name: 'home',
    params: { 
        id: 11111,
            name: '景天'
    }
})

// 接收参数
$route.params.id
$route.params.name

// 需要注意的是
params这种传值方式，在路由的配置中，需要是提前占位置
即：

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [
        name: 'home',
        path：'/home/:id/:name',
        component: Home
      ]
    }
  ]
})

路由的props传值方式

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [
        name: 'home',
        path：'/home/:id/:name',
        component: Home,
        // 第一种，值为对象
        props: {id:1,name:"景天"}
        // 第二种，值为布尔值，若布尔值为真，就会把该路由组件收到的所有的params参数，以props的形式传递给Home组件
        props: true,
        // 第三种，值为函数，接收一个默认值，就是$route
        props($route) {
            return {
                id: $route.query.id,
                name: $route.query.name
            }
        }
      ]
    }
  ]
})

路由跳转的两种方式

1.默认push—跳转后，可以后退，因为push是最佳一个历史记录
2.replace—跳转后不能后退，repalce是替换当前的记录

<router-link replace :to="`/home/${id}/${name}`"></router-link>

路由的缓存

作用：让不展示的路由组件保持挂载，不被销毁

// include的值就是要缓存的组件，单个组件时，可以是字符串，多个组件时，要用数组，另外这个名字是组件里面的那个name名称
// <keep-live include="home">
<keep-live include="['home','about']">
    <router-view></router-view>
</keep-live>

路由涉及到的两个新的生命周期

1. activated()----组件被激活时
2. deactivated()----组件失活时