theme: condensed-night-purple
highlight: a11y-dark
这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
vue-router
目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/
vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
安装
步骤一: 安装vue-router
npm install vue-router --save
步骤二: 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例```js ------------src/router/index.js // 配置路由相关信息 import Vue from 'vue' import VueRouter from 'vue-router'
// 1. 通过Vue.use(插件) 安装插件 Vue.use(VueRouter)
// 创建VueRouter对象 const routes = [ // 配置路由和组件之间的映射关系 ] const router = new VueRouter({ routes })
// 3. 将VueRouter对象传入vue实例 export default router
------------在main.js中挂载路由到vue实例中 import router from './router' // 导入
new Vue({ el: '#app', router, render: h => h(App) })
```
使用vue-router的步骤:
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过<router-link>和<router-view><router-link>：vue-router里自动注册的全局组件，可以在任意位置用，最终会被渲染成a标签 <router-view>：用于决定渲染出来的组件在什么位置展现，组件渲染出来替换 的位置
views文件夹就是放路由组件的，只不过将其他组件和路由组件分开放，便于管理
```js // 配置路由映射 import Home from '../components/Home.vue' import About from '../components/About.vue' const routes = [
{ path : '/home', component : Home }, { path : '/about', component : About } ]
// 使用路由
<router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签. <router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.
网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和<router-view>处于同一个等级. 在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变.
遇到问题：Uncaught ReferenceError: Home is not defined 解决方法：在Home.vue里面，home没有加引号 js export default { name : "Home" };
路由默认值
默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.
如何让路径默认跳转到首页, 并且<router-view>渲染首页组件呢? 只需要配置多配置一个映射就可以了 js { path : '/', redirect : '/home' }, 配置解析: 在routes中又配置了一个映射. path配置的是根路径: / redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.
修改为history模式
我们前面说过改变路径的方式有两种: URL的hash HTML5的history 默认情况下, 路径的改变使用的URL的hash url会有#，不美观，而history没有# 如果希望使用HTML5的history模式, 进行如下配置即可: js const router = new VueRouter({ routes, mode : 'history' })
在hash下，使用history.back()时，地址栏会有#，http://localhost:8080/test#/ 而在history模式下，地址栏为http://localhost:8080/test
<router-link>的其他属性
在前面的<router-link>中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
<router-link>还有一些其他属性:
tag: tag可以指定<router-link>之后渲染成什么组件, 比如<router-link to="/home" tag="li">代码会被渲染成一个<li>元素, 而不是<a>
replace: replace不会留下history记录, 在指定replace的情况下, 后退键不能返回到上一个页面中
active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类. 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.
replace 没有快捷方式，只能在link里自己写 但active-class可以快捷改， js // 在路由里改 const router = new VueRouter({ routes, mode : 'history', linkActiveClass : 'active' })
exact-active-class 类似于active-class, 只是在精准匹配下才会出现的class. 后面看到嵌套路由时, 我们再看下这个属性.
路由代码跳转
有时候我们不想要用<router-link>，而是自己写 有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了 所有路由都是通过vue-router来处理
vue-router源码中给所有组件中都加了$router属性, 就是index里const的router对象 两种解决办法， 法一： 链接后面加时间戳， 法二：判断当前路径和你想要跳转的路基是否一样，如何一样，就不跳转了 js export default { name: "App", methods : { homeClick () { this.$router.push('/home') // this.$router.replace('/home') // 上面的代码如果多次点击同一个按钮，会报错 // if(this.$router.options.routes[1].path!='/home'){ // this.$router.replace('/home') // console.log('1'); // } // console.log('homeClick'); }, aboutClick (){ this.$router.push('/about') // this.$router.replace('/about') // 上面的代码如果多次点击同一个按钮，会报错 // if(this.$router.options.routes[1].path!='/about'){ // this.$router.replace('/about') // console.log('2'); // } // console.log('aboutClick'); } } }
动态路由
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb 除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。
新建user组件 配置router的index文件，引入组件，配置routes path : '/user/:userId', 在app.vue中，
1. 利用v-bind 动态绑定 <router-link v-bind:to="'/user/' + userId">用户</router-link> 2. 想要在user组件中显示路由中的userId：$route $route: 当前哪个路由处于活跃状态(当前显示(使用)的组件)，就获取哪个路由 <h3>用户信息：{
{$route.params.userId}}</h3>
route(routes[])-->route($route) routes[]路由数组，相当于家里的路由器，里面每一个值(route)，相当于连接的每一台设备(每个人的手机、电脑、电视等) -->