vue-router:路由的理解

认识路由

  • 路由用于设定访问路径,将路径和组件映射起来

在vue-router中的单页面应用中,页面的路径的改变就是组建的切换


后端路由:后端处理URL和页面之间的映射关系
前端路由:前端管理URL和页面之间的映射关系

vue-router基本使用

步骤一:安装vue-router

npm install vue-router --save

步骤二:在模块化工程中使用
  1. 导入路由对象,并调用Vue.use(VueRouter),安装插件
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
  1. 创建路由实例,并且传入路由映射配置
//从上层文件导入两个组件
import Aaa from '../components/Aaa'
import Bbb from '../components/Bbb'

const routes = [
//配置映射关系,一个{}对应一个组件
   {
     path:'/aaa',
     component:Aaa
   },
   {
     path:'/bbb',
     component:Bbb
   }
]
const router = new VueRouter({
  routers
})
export default router
  1. 在Vue实例中挂载创建的路由实例
new Vue({
  el:'#app',
  router,
  render: h => h(App)
})

使用vue-router的步骤:
  1. 创建路由组件
  2. 配置路由映射:组件与路径映射关系
  3. 使用路由:通过<router-link><router-view>
<router-link>:该标签是vue-router中已经内置的组件,它会被渲染成一个<a>标签.
<router-view>:该标签会根据当前的路径,动态渲染出不同的组件.

<router-link>的属性:
  • to:用于指定跳转的路径
<router-link to="/about">关于</router-link>
  • tag:可以指定<router-link>之后渲染成什么组件
<router-link to="/about" tag="button">关于</router-link>
  • replace:不会留下history记录,因此指定replace的情况下,后退键不能返回到上一个页面中
<router-link to="/about" tag="button" replace>关于</router-link>
//replace后面不需要加任何东西

vue-router动态路由

1.配置user,创建一个简单的映射关系

{
  path:'/user/:aaa',
  component:User
}
  1. <router-link>中使用v-bind动态绑定
<router-link :to="/user/+userId">用户</router-link>

3.在User.vue文件中拿到传过来的用户ID

userId(){
      return this.$route.params.aaa
}

路由的懒加载

当打包构建应用时,Javascript包会变得很大,因此将路由对应的组件分割成不同的代码块,当路由被访问时才加载对应组件,提高效率.
懒加载的方式:
  1. 结合Vue的异步组件和Webpack的代码分析
const Home = resolve => {require.ensure(['../components/Home.vue'],() => {resolve(require('../components/Home.vue'))})};
  1. AMD写法
const About = resolve => require(['../components/About.vue'],resolve);

3.在ES6中,可以用更简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import('../components/Home.vue')
//推荐写法,写在入口文件中

vue-router嵌套路由

在实际应用界面中,页面往往由多层嵌套的组件组成

  1. 定义“登录”和“注册”两个组件
<template id="login"> 
    <div>登录界面</div>
</template> 
<template id="reg">
    <div>注册界面</div>
</template>
//定义路由组件
const Login = { template: '#login' }; 
const Reg = { template: '#reg' };

2.定义路由,通过children嵌套

const routes = [
   { path: '/', redirect: '/home' },
  { 
    path: '/home',
    component: Home, 
    children:[ 
       { path: '/home/login', component: Login}, 
       { path: '/home/reg', component: Reg}
    ] 
  }, 
  { path: '/news', component: News}
]

vue-router参数传递

传递参数主要有两种类型:paramsquery

params的类型:

  • 配置路由格式:/router/:id
  • 传递的方式:在path后面跟上对应的值
  • 传递后形成的路径:/router/aaa,/router/bbb

query的类型:

  • 配置路由格式:/router,也就是普通配置
  • 传递的方式:对象中使用query的key作为传递方式
  • 传递后形成的路径:/router?id=aaa,/router?id=bbb

这里讲一下URL:
协议://主机:端口/路径?查询
scheme://host:port/path?query#fragment

vue-router导航守卫(guard)

一、全局守卫
前置钩子(hook)
 router.beforeEach((to,from,next)=>{
 
  })
to:即将要进入的目标的路由对象
from:当前导航即将要离开的路由对象
next:调用该方法后,才能进入下一个钩子

可以利用beforeEach来完成标题的修改


后置钩子
router.afterEach((to,from)=>{
  
  })
只有两个参数,to和from
二、组件内的守卫
beforeRouteEnter
beforeRouteEnter:(to,from,next)=>{}

注意:beforeRouteEnter函数在data()函数之前,即,调用beforeRouterEnter函数时,组件还没有初始化,此时不能使用this来代表实例组件

beforeRouteUpdate
beforeRouteUpdate:(to,from,next)=>{}
beforeRouteLeave
beforeRouteLeave:(to,from,next)=>{}
三、路由独享的守卫
beforeEnter:(to,from,next)=>{}

用法与全局前置守卫一致,只是将其写进其中一个路由对象中,只在这个路由下起作用


keep-alive

keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染

<keep-alive>
      <component>
      <!--该组件将被缓存-->
      </component>
</keep-alive>

include:字符串或正则表达,只有匹配的组件会被缓存
<keep-alive include="a">
   <component>
  <!-- name 为 a 的组件将被缓存! -->
    </component>   
</keep-alive>
exclude:字符串或正则表达式,任何匹配的组件都不会被缓存
<keep-alive exclude="a">    
   <component>   
 <!-- 除了 name 为 a 的组件都将被缓存! -->    
   </component>  
</keep-alive>
router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存
<keep-alive>   
   <router-view>    
 <!-- 所有路径匹配到的视图组件都会被缓存! -->   
   </router-view>  
</keep-alive>
增加 router.meta 属性
//routes配置
export default [
 {
   path:'/',
   name:'home',
   component:Home,
   meta:{
      keepAlive:true  //需要被缓存
   }
 },{
   path:'/:id',
   name:'edit',
   component:Edit,
   meta:{
      keepAlive:false  //不需要被缓存
   }
 }
]
<keep-alive>
   <router-view v-if="$route.meta.keepAlive">
      <!--这是是会被缓存的视图组件,比如Home-->
   </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
      <!--这是是不会被缓存的视图组件,比如Edit-->
</router-view>
阅读 77

推荐阅读