17 vue router

路由 — Vue.js (opens new window)

后端路由工作方式：由后台服务器对 URL 进行解析，并返回结果（服务器渲染） 前端路由工作方式：由前端处理 URL 的跳转，前端通过数据 API 与后台服务器进行通信，通常是 SPA 应用

是谁处理 URL 路由和页面之间的关系？

---

前端路由 hash / history

HTML5 History 模式 | Vue Router (opens new window)

url中#(hash)的含义 - SegmentFault 思否 (opens new window)

vue-router的两种模式（hash和history）及区别_xiaokanfuchen86的博客-CSDN博客 (opens new window)

Vue的mode中 hash 与 history 的区别 (opens new window)

前端路由hash、history原理及简单的实践下 - 龙恩0707 - 博客园 (opens new window)

vue router 的安装与使用

npm install vue-router

第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例

// ./src/router/index.js

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例
export default router

// ./src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

vue-router 的映射关系基础配置

第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过 <router-link> 和 <router-view>

// VueRouter对象
const routes = [
  {
    path: '',
    redirect: '/home'  // 重定向配置
  },
  {
    path: '/home',
    component: Home    // 组件路由配置
  },
];

const router = new VueRouter({
  routes,
  mode: 'history',  // history 模式（默认是 hash 模式）
  // [API 参考 | active-class](https://router.vuejs.org/zh/api/#active-class )
  linkActiveClass: 'active' // router-link active 类名默认值是 router-link-active
})

router-link

API 参考 | router-link (opens new window)

不使用 router-link，自己使用 js 处理路由跳转

编程式的导航 | Vue Router (opens new window)

动态路由

动态路由匹配 | Vue Router (opens new window)

路由懒加载

路由懒加载 | Vue Router (opens new window)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

嵌套路由

嵌套路由 | Vue Router (opens new window)

路由组件传参

路由组件传参 | Vue Router (opens new window)

router-link Props | Vue Router (opens new window)

• 路由跳转

<!-- 在路径中传递参数 -->
<router-link :to="'/user/'+userid"></router-link>

<!-- 在 query 中传递参数 -->
<router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.88}}">

// 在路径中传递参数
this.$router.push('/user/' + this.userId)

// 在 query 中传递参数
this.$router.push({
        path: '/profile',
        query: {
          name: 'why',
          age: 19,
          height: 1.87
        }
      })

• 在组件中接收路由参数

// 路由定义
const routes = [
  {
    path: '/user/:id',  // 这里的 id 就是参数名称
    component: User,
    meta: {
      title: '用户'
    },
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    },
  }
]

<!-- 取用路由参数 -->
<h2>{{$route.params.id}}</h2>

<h2>{{$route.query.name}}</h2>

// 取用路由参数
this.$route.params.id

this.$route.query.name