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 } ]应用路由：通过<router-link>和<router-view>
- 在app.vue 中 写
<router-link>相当于a标签
<router-link to="home">首页</router-link><router-view>相当于将内容显示在link下面或者上面
路由的默认门路
- 让门路默认跳进首页并且能够被渲染
只有在多配置一个映射就能够了
const routes = [ { path:'/', redirect:'/home' } ] //在route中又配置了一个映射 pa/th配置的是根门路 redirect是重定向，也就是咱们将根门路重定向到/home的门路下，这也就能够失去想要的后果了
router-link补充
- tag：tag能够指定<router-link>之后渲染成什么组件。<router-link to/'home' tag='button'>将会被渲染成button按钮就
- replace：replace不会留下history记录，所以指定replace的状况下，后退键返回不能返回到上一个页面
active-class：当<router-link>对应的路由匹配胜利时，会主动给以后元素设置一个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拜访一些内容
- 一个门路映射一个组件，拜访这两个路劲也会别离渲染两个组件
实现嵌套路由有两个步骤：
- 创立对应的子组件，并且在路由映射中配置对应的子路由
- 在组件外部应用<router-view>标签
//创立组件，比方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 <router-link to="/ome/news">新闻</router-link> <router-link to="/home/message">新闻</router-link> <router-view></router-view> 参数传递
- 传递参数次要有两种类型：params和query
params的类型
- 配置路由格局：/router/:id
- 传递的形式：在path前面跟上对应的值
- 传递后造成的门路：/router/123, /router/abc
query的类型
- 配置路由格局：/router，也就是一般配置
- 传递的形式：对象中应用query的key作为传递形式
- 传递后造成的门路：/router？id=123，/router?id=abc
- 应用：<router-link>的形式和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外面，所有门路匹配到的视图组件都会被缓存
- 用法：蕴含住<router-view>
keep-alive是Vue内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染
- 它们有两个十分重要的属性：
- include - 字符串或正则表白，只有匹配的组件会被缓存
- exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存 <keep-alive exclude="Home,User"> //不能轻易加空格
- router-view也是一个组件，如果间接被包在keep-alive外面，所有门路匹配到的视图组件都会被缓存