Vue 路由基础

1. router-link 和 route-view 组件
2. 路由配置
   2.1. 动态路由
   2.2. 嵌套路由
   2.3. 命名路由
   2.4. 命名视图
3. 重定向和别名
4. JS 操作路由

1. router-link 和 route-view 组件

---

router-link 组件封装了一个 a 标签，<router-link> 相当于 <a href="...">，支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

route-view 是视图渲染组件，通过 route-link 指定的路径都会在这个里面去渲染

2. 路由配置

---

首先，一个路由列表它是一个组件，在里面包含着路由对象。最基本的路由对象必须包含两个属性：path 和 component。path 是 url 路径，component 是想要渲染的组件。

import Home from '@/views/Home.vue'
export default [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/about',
    // lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
    component: () => import('@/views/About.vue'),
  }
]

2.1 动态路由

router.js 代码：

import Home from '@/views/Home.vue'
export default [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/about',
    // lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
    component: () => import('@/views/About.vue'),
  },
  // 动态路由
  {
    // name 就是一个动态路由参数
    path: '/arg/:name',
    component: () => import('@/views/arg.vue')
  },
]

arg.vue 代码：

<template>
  <div>
    {{ $route.params.name }}
  </div>
</template>

<script>
export default {
  //
}
</script>

$route：当前激活的路由信息对象，$route.params.name 表示路由中有一个 params 对象，params 对象有一个 name 属性，这里的 name 就是在 route.js 中 path 后面所定义的动态路由参数

路由对象属性

$route.path
类型: string

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

$route.params
类型: Object

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

$route.query
类型: Object

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

$route.hash
类型: string

当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

$route.fullPath
类型: string

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

$route.matched
类型: Array<RouteRecord>

一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。

$route.name
当前路由的名称，如果有的话。

$route.redirectedFrom
如果存在重定向，即为重定向来源的路由的名字。

通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。

this.$router
router 实例。

this.$route
当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，

2.2 嵌套路由

router.js：

import Home from '@/views/Home.vue'
export default [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/about',
    // lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
    component: () => import('@/views/About.vue'),
  },
  // 嵌套路由
  {
    path: '/parent',
    component: () => import('@/views/parent.vue'),
    children: [
      {
        // 嵌套字节点，不添加 /
        // path: '/child',
        path: 'child',
        component: () => import('@/views/child.vue')
      }
    ]
  },
]

parent.vue：

<template>
  <div>
    I am parent
    <!-- 用来渲染路由视图 -->
    <route-view/>
  </div>
</template>
<script>
export default {
  //
}
</script>

child.vue：

<template>
  <div>
    I am child
  </div>
</template>

2.3 命名路由

router.js

import Home from '@/views/Home.vue'
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    // lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
    component: () => import('@/views/About.vue'),
  },
]

多了一个 name 关键字，这里在组件中引用，可以使用 name 的值来引用。

<template>
  <div id="app">
    <div id="nav">
      <route-link :to="{ name: 'home' }">Home</route-link>
      <route-link :to="{ name: 'about' }">About</route-link>
    </div>
    <route-view/>
  </div>
</template>

<script>
export default {
  //
}
</script>

2.4 命名视图

<route-view>，如果我们想在同一个页面上显示多个视图，而且让每一个视图显示在指定位置的话，这个时候我们就可以使用命名视图。

router.js：

import Home from '@/views/Home.vue'
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    // lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
    component: () => import('@/views/About.vue'),
  },
  // 命名视图
  {
    path: '/name_view',
    // 这里注意，是 components 表示加载多个组件
    components: {
      // 默认没有命名，加载 default
      default: () => import('@/veiws/child.vue'),
      email: () => import('@/views/email.vue'),
      tel: () => import('@/views/tel.vue')
    }
  }
]

多个 <route-view> 包含多个视图：

<template>
  <div id="app">
    <div id="nav">
      <route-link :to="{ name: 'home' }">Home</route-link>
      <route-link :to="{ name: 'about' }">About</route-link>
    </div>
    <route-view/>
    <route-view name="email"/>
    <route-view name="tel"/>
  </div>
</template>

email.vue：

<template>
  <div>
    email: admin@root.vue
  </div>
</template>

tel.vue：

<template>
  <div>
    tel: 13838383838
  </div>
</template>

3. 重定向和别名

---

重定向：将当前要访问的 url 转到另一个指定的 url
别名：给引用路径设置一个其他名称。使用 alias 关键字

router.js：

import Home from '@/views/Home.vue'
export default [
  {
    path: '/',
    alias: '/my_home',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    // lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
    component: () => import('@/views/About.vue'),
  },
  // 重定向
  {
    // 当我们访问 '/main' 时，重定向到 '/'
    path: '/main',
    redirect: '/',
    // 也可以使用命名路由
    //redirect: {
    //  name: 'home'
    //}
  }
]

4.JS 操作路由(编程式导航)

---

编程式导航需要获取一个路由实例，通过 this.$router 来获取。

Home.vue：

<template>
  <div id="home">
    <button @click="handleClick('back')">返回上一页</button>
    <button @click="handleClick('push')">跳转到 parent </button>
    <button @click="handleClick('replace')">替换到 parent </button>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  component: { HelloWorld },
  method: {
    handleClick (type) {
      //this.$router.go(-1)
      if (type === 'back') {
        this.$router.back()
      } else if (type === 'push') {
        this.$router.push({
          // 通过命名路由的方式
          name: 'parent',
          // 方法2: 动态路由参数
          params：{
            name: 'wayne'
          }
          //// 方法1：url 中带查询参数
          //query: {
          //  name: 'wayne'
          //}
        })
      } else if (type === 'replace') {
        // 使用 replace， 它与 push 的区别是 replace 是替换，
        // 它不会被记录在路由记录中
        this.$router.replace({
          name: 'parent'
        })
      }
    }
  }
}
</script>