Vue Router 前端vue.js

VueRouter

安装vue-router

npm install vue-router --save

搭建框架
在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）
- 第一步：导入路由对象，并且调用Vue.use(VueRrouter)
- 第二步：创建路由实例，并且传入路由映射配置
- 第三步：在Vue实例中挂载创建的路由实例
在src文件夹下手动创建router文件夹
router文件夹内创建index.js
index.js中编写

//配置路由相关的信息搭建框架 import VuRouter from 'vue-router' import Vue from 'vue'//1.通过Vue.use(插件)，安装插件 Vue.ues(VueRouter)//2.创建VueRouter对象 const routes = [] const router = new VueRouter({ //配置路径和组件之间的应用关系 routes: })将router对象传入到vue实例 export default router//3. //将router对象传入到实例中 //在main.js实例中 import router from '路径' router: router

使用vue-router的步骤

创建路由组件/在components文件夹内
配置路由映射：组件和路径映射关系
- 在index.js文件中
  
  //导入components中相关组件 import Home from '组件路径' import Home from '组件路径'

const routes = [ {path:'/home（可换）', component:null//一个映射关系就是一个对象 }, { path:'/about（可换）', component:null } ]

使用路由：通过
和
- 在app.vue 中写
- 相当于a标签
  
  首页
- 相当于将内容显示在link上面或者下面
路由的默认路径
- 让路径默认跳进首页并且可以被渲染
- 只要在多配置一个映射就可以了
  
  const routes = [ { path:'/', redirect:'/home' } ] //在route中又配置了一个映射 pa/th配置的是根路径 redirect是重定向，也就是我们将根路径重定向到/home的路径下，这也就可以得到想要的结果了

?

router-link补充

tag：tag可以指定之后渲染成什么组件。将会被渲染成button按钮就
replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面
active-class：当
对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称
- 在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类
- 但是通常不会修改类的属性，会直接使用默认的router-link-active

通过代码跳转路由 this.$router.push('/home')
路由懒加载

用到时再加载
当打包构建应用时，Javascript包会变得非常大，影响页面加载
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
只有在这个路由被访问到的时候，才加载对应的组件
懒加载的方式
- 方式一：结合Vue的异步组件和Webpack的代码分析
  
  const Home = resolve => { require.ensure(['../components/Home.vye'],() => { resolve(require('../components/Home.vue')) })}; //老版
- 方式二：AMD写法
  
  const About = resolve => require(['../components/About.vue'], resolve);

方式三：ES6中，更加简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import('../components/Home.vue')

路由的嵌套使用

嵌套路由是一个很常见的功能
- 比如在home页面中，我们希望通过/home/news和/home/message访问一些内容
- 一个路径映射一个组件，访问这两个路劲也会分别渲染两个组件
实现嵌套路由有两个步骤：
- 创建对应的子组件，并且在路由映射中配置对应的子路由
- 在组件内部使用标签

//创建组件，比如news，message（内容显示在首页里） //打开index.js const HomeNews = () => import('../components/HomeNews') const HomeMessage = () => import('../components/HomeMessage')const routes = [ path: '/home', children; [ { path:'news'//子路由不需要加‘/’ component:HomeNews }, { path:'Message'//子路由不需要加‘/’ component:HomeMessage } ] ]//打开Home.vue 新闻新闻

参数传递

传递参数主要有两种类型：params和query
【Vue Router】params的类型
- 配置路由格式：/router/:id
- 传递的方式：在path后面跟上对应的值
- 传递后形成的路径：/router/123, /router/abc
query的类型
- 配置路由格式：/router，也就是普通配置
- 传递的方式：对象中使用query的key作为传递方式
- 传递后形成的路径：/router？id=123，/router?id=abc
使用：的方式和Javascript代码方式

导航守卫

router.beforeEach((to,from,next)) => { document.title = to.matched[0].meta.title console.log(to) next() }

keep-alive

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存
用法：包含住
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
- 它们有两个非常重要的属性：
- include - 字符串或正则表达，只有匹配的组件会被缓存
- exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存 //不能随便加空格
router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存