Vue Router 使用、基础回顾 电脑版发表于:2021/2/10 19:31 # Vue Router 使用、基础回顾 Vue.js 官方的路由管理器。 > Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 使用 @vue/cli 可以快速生成一个带有 vue-router 的 vue 应用 ## 动态路由 - 先看一个基本栗子 ```JavaScript { path: '/about/:userId', name: 'About', // 开启 props,会把 URL 中的参数传递到组件 // 而在组件中就可以用 props 来接受 URL 传递的参数 props: true, // 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') } ``` 在动态路由中,它就是通过一个占位,来匹配我们变化的地方 - 如何在组件中获取传递的动态参数呢,有两种方法。 1. `$route.params.userId` 从 `$route` 对象的 `params` 属性获取 2. 通过 `props` 选项 获取 ```JavaScript export default { name: 'xxxx', props:['userId'] } ``` 这种方式必须在 **路由规则** 启用 `props: true` 更加建议使用第二种方式,这样可以降低对路由的依赖。 ## 嵌套路由 ```JavaScript const routes = [ { name: 'login', path: '/login', component: Login }, // 嵌套路由 { path: '/', component: Layout, children: [ { name: 'index', path: '', component: Index }, { name: 'detail', path: 'detail/:id', props: true, component: () => import('@/views/Detail.vue') } ] } ] ``` > path 的值,开头使用 `/` 将是绝对路径,不包含 `/` 则是相对路径 ## 编程式导航 在代码中进行路由操作 - push ```JavaScript $router.push('/') $router.push({ name: 'Index' }) ``` `push` 方法用来跳转到一个新的地址, 该方式的参数支持 2 种方式来表示 分别可以用 `string` 字符串 或者`Object` 对象的形式来表示一个新的路由地址 并且该地址会在浏览器历史记录中留存 再看一个传递参数的例子 ```JavaScript $router.push('/detail?id=9527') $router.push({ name: 'Detail', params: { id: 9527}}) ``` 它们的效果是等价的 - replace ```JavaScript $router.replace('/login') ``` 把当前地址替换为登录页,使用方式 与 `push` 一致 - go ```JavaScript $router.go(2) $router.go(0) $router.go(-1) ``` ## Hash 模式 hash 模式 是 vue-router 默认模式 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 就行这样 `http://localhost:8080/#/about` - 原理 Hash 模式是基于锚点,以及 `onhashchange` 事件 当地址上 `#` 后的内容发生变化,将会触发 onhashchange 事件,从而根据当前路由地址找到对应的组件进行渲染 ## History 模式 vue-router 还可以使用 History 模式,这样地址就可以不用出现难看的 `#` 了 可以在创建 `VueRouter` 时指定 `mode` 选项为 `history` 来启用 **History 模式** ```JavaScript const router = new VueRouter({ mode: 'history', routes }) ``` 地址将会是这样的 `http://localhost:8080/about` - 原理 History 模式是基于 HTML5 中的 History API - history.pushState - history.replaceState pushState 方法可以改变地址栏的内容,并保存到历史记录中来。但是并不会向服务端发送请求。 这个特性,天然的让 History API 可以用来实现客户端路由 > IE 10 以后才支持 ### 服务端支持 由于单页应用的特性,使用 History 模式 需要服务进行配置以支持该模式 比如 `http://localhost:8080/about` 地址,在服务端是不存在的 如果不对服务端进行配置,访问该地址会返回找不到该页面 所以在服务端应该,除了静态资源外都返回单页应用的 `index.html` - nginx 配置 ```conf location / { # 根目录 root html; index index.html index.htm; # 顺序检查文件是否存在 try_files $uri $uri/ /index.html } ``` **try_files:** 顺序检查文件是否存在,否则返回最后一个参数指定的内容