17 vue router

7/5/2021 vue

路由 — 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
})

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
更新时间: Thursday, July 8, 2021 21:57