一、路由概念
1.1 路由是一个网络工程中的术语,路由(routing)就是通过互联的网络把信息从源地址传递到目的地址的活动
1.2 路由器提供了两种机制:路由和传递
- 路由是决定数据包从来源到目的地的路径
- 转送将输入端的数据转移到合适的输出端
1.3 路由表本质上就是一个映射表,决定了数据包的指南
1.4 后端路由(第一阶段):后端处理URL和页面之间的映射关系
1.5 前后端分离阶段(第二阶段):
- 后端只负责提供数据,不负责任何阶段的内容;
- 前端渲染,浏览器中显示的网页中的大部分内容,都是由前端写的js代码在浏览器中执行,最终渲染出来的网页
1.6 单页面富应用阶段(第三阶段):
- SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
- 也就是前端来维护一套路由规则
1.7 前端路由的核心:改变url,但是页面不进行整体的刷新
二、vue-router 基本使用(官网:https://router.vuejs.org/zh/)
2.1 vue-router适用于构建单页面应用,并且是基于路由和组件的
- 路由用于设定访问路径,将路径和组件映射起来
- 在vue-router的单页面应用中,页面的路径的改变就是组件的切换
2.2 通过工程化方式进行开发
步骤一:安装vue-router
npm install vue-router -save
步骤二:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)
- 第一步:导入路由对象,并且调用Vue.use(VueRouter)
- 第二步:创建路由实例,并且传入路由映射配置
- 第三步:在Vue实例中挂载创建的路由实例
////////////在router的index.js中 //配置路由相关的信息 import VueRouter from 'vue-router' import Vue from 'vue' //1.通过Vue.use(插件),安装插件 Vue.use(VueRouter) //2.创建路由对象 const routes = [ ] const router = new VueRouter({ //在routes中配置组件之间的映射关系 routes: routes,
//默认情况下,路径的改变使用的URL的hash。下面则是使用 HTML5的history模式
mode: 'history'
}) //3.将router对象传入vue实例中 export default router ////////////在main.js中 import Vue from 'vue' import App from './App' import router from './router/index.js' //index可以省略 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router:router, //直接可以简写成router render: h => h(App) })
2.3 使用vue-router的步骤
- 第一步:创建路由组件
- 第二步:配置路由映射:组件和路径映射关系
- 第三步:使用路由:通过<router-link>和<router-view>
//配置路由映射 import Home from '../components/Home' import About from '../components/About' //2.创建路由对象 const routes = [
{
path: '',
//设置默认打开的url路径
redirect: '/home'
},{ path: '/home', component: Home },{ path: '/about', component: About } ] //使用路由 在App.vue中使用路由
<div id="app"> <!-- 路由的显示 --> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <!-- router-view 相当于展位 --> <router-view></router-view> </div>
例子:也可以进行通过代码修改路由
<template> <div id="app"> <!-- 路由的显示 --> <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link> <router-link to="/about" tag="button" replace active-class="active">关于</router-link> --> <!-- <router-link to="/home" tag="button" replace>首页</router-link> <router-link to="/about" tag="button" replace>关于</router-link> --> <button @click='homeClick'>首页</button> <button @click='aboutClick'>关于</button> <!-- router-view 相当于占位 --> <router-view></router-view> </div> </template> <script> export default { name: 'App', methods: { homeClick(){ //通过代码方式修改路由 vue-router //push => pushState //this.$router.push('/home') this.$router.replace('/home') console.log("homeClick") }, aboutClick(){ //this.$router.push('/about') this.$router.replace('/about') console.log("aboutClick"); } } } </script> <style> .active{ color: red; } </style>
- <router-link> :该标签是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签
- <router-link> :该标签会根据当前的路径,动态渲染出不同的组件
- 网页的其他内容,比如底部的标题、导航。或者底部的一些版权信息会和<router-view>处于同一级
- 在路由切换时,切换的是<router-view>挂载的组件,其他的内容不会发生改变
- 效果图如下
2.4 <router-link>属性的补充
- tag:tag可以指定<router-link>之后渲染成什么组件;例如 tag="button" 会渲染成<button>
- replace:replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中
- active-class:当<router-link>对应的路由不匹配时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称
在进行高亮显示的导航菜单或者底部tabbar时,会用到该类
但是通常不会修改类的属性,会直接使用默认的router-link-active即可
三、vue-router 理由懒加载
■方式一:结合Vue的异步组件和Webpack的代码分析
const Home = resolve => {require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })}
■方式二: AMD写法
const About = resolve => requore(['../components./About.vue'], resolve);
■式三:在ES6中,我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
const Home = () => import('../components/Home.vue')
四、vue-router 动态路由
4.1 创建User.vue文件
<template> <div> <h2>我是用户界面</h2> <p>我是用户的相关信息,嘿嘿嘿</p> <p>{{userId}}</p> </div> </template> <script> export default{ name:'User', computed: { userId(){ //$route取到正处于活跃的路由 return this.$route.params.abcId } } } </script> <style scoped></style>
4.2 路由文件夹下index.js文件配置
//配置路由相关的信息 import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home' import About from '../components/About' import User from '../components/User' //1.通过Vue.use(插件),安装插件 Vue.use(VueRouter) //2.创建路由对象 const routes = [ { path: '', //redirect 重定向 redirect: '/home' }, { path: '/home', component: Home },{ path: '/about', component: About },{ //重点 path: '/User/:abcId', component: User } ] const router = new VueRouter({ //在routes中配置组件之间的映射关系 routes: routes, mode: 'history', linkActiveClass: 'active' }) //3.将router对象传入vue实例中 export default router
4.3 App.vue 使用
<template> <div id="app"> <router-link to="/Home" tag="button" active-class="active">首页</router-link> <router-link to="/About" tag="button" active-class="active">关于</router-link> <router-link v-bind:to="'/User/'+userId" tag="button" active-class="active">用户</router-link> <!-- router-view 相当于占位 --> <router-view></router-view> </div> </template> <script> export default { name: 'App', data(){ return { userId: 'lisi' } } } </script> <style> .active{ color: red; } </style>
五、vue-router 嵌套路由
■嵌套路由是一个很常见的功能
ロ 比如在home页面中,我们希望通过/home/news和/home/message访问一些内容.
ロ 一个路径映射一个组件,访问这两个路径也会分别渲染两个组件.
实现嵌套路由有两个不步骤
创建对应的子组件,并在路由映射中配置对应的子路由
在组件内部使用<router-view> 标签。
js配置文件
//配置路由相关的信息 import VueRouter from 'vue-router' import Vue from 'vue' // import Home from '../components/Home' // import About from '../components/About' // import User from '../components/User' //1.通过Vue.use(插件),安装插件 Vue.use(VueRouter) //2.创建路由对象 const routes = [ { path: '', //redirect 重定向 redirect: '/home' }, { path: '/home', //component: Home component: ()=> import('../components/Home'), children:[ { path: '', redirect: '/home/news' },{ //子路由不需要加 “/” path: 'news', component: ()=> import('../components/HomeNews') },{ path: 'messages', component: ()=> import('../components/HomeMessage') } ] },{ path: '/about', // component: About component: ()=> import('../components/About') },{ path: '/User/:abcId', // component: User component: ()=> import('../components/User') } ] const router = new VueRouter({ //在routes中配置组件之间的映射关系 routes: routes, mode: 'history', linkActiveClass: 'active' }) //3.将router对象传入vue实例中 export default router
六、vue-router 传递参数
传递参数主要有两种类型: params和query
params的类型:
- 配置路由格式: /router/:id
- 传递的方式:在path后面跟上对应的值
- 传递后形成的路径: /router/123, /router/abc
query的类型:
- 配置路由格式: /router,也就是普通配置
- 传递的方式:对象中使用query的key作为传递方式
- 传递后形成的路径: /router?id=123, /router?id=abc
七、vue-router 导航守卫
7.1 在钩子当中定义一些标题,可以利用mata(元数据)来定义
7.2 利用导航守卫,修改标题
//2.创建路由对象 const routes = [ { path: '', //redirect 重定向 redirect: '/home' }, { path: '/home', //component: Home component: ()=> import('../components/Home'), meta: { //元数据 title: "首页" } },{ path: '/about', // component: About component: ()=> import('../components/About'), meta: { title: "关于" } },{ path: '/user/:Id', component: ()=> import('../components/User'), meta: { title: "用户" } },{ path: '/profile', component: ()=> import('../components/Profile'), meta: { title: "档案" } },{ path: '/user2/:Id', component: ()=> import('../components/User2'), meta: { title: "用户2" } },{ path: '/profile2', component: ()=> import('../components/Profile2'), meta: { title: "档案2" } } ]
7.3 导航钩子的三个参数的解析
- to:即将要进入的目标路由对象
- form:当前导航即将要离开的路由对象
- next:调用该方法后,才能进入下一个钩子
// router.beforeEach(function(to, form, next){ // }) router.beforeEach((to, from, next)=>{ //从from跳转到to document.title = to.matched[0].meta.title next() })
注意:beforeEach(to, from, next):前置钩子,在跳转之前进行处理,需要主动调用 next() 函数
afterEach(to, from):后置钩子,在跳转之后进行处理,不需要主动调用 next() 函数
八、keep-alive
8.1 keep-alive 是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
有两个重要的属性
include -字符串或正则表达式,只有匹配的组件会被缓存
exclude -字符串或政策表达式,任何匹配的组件都不会被缓存
如下所示 exclude="定义组件的name的值" ;注意:中间不能加 空格
<keep-alive exclude="Profile,User"> <router-view></router-view> </keep-alive>
8.2 router-view 也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存。
8.3 可以通过create声明周期函数来验证