vue-router学习笔记（vue-cli@2.x版本）

首先需要在项目中引入vue-router，一种方式是在创建项目，配置项目时选择使用vue-router，另一种是自行引入vue-router

npm install vue-router --save

引入以后就可以在项目中使用vue-router啦

首先在src目录下创建一个router文件夹，里边再新建一个index.js文件，这个文件里就是用来配置vue-router


如图目录

在index.js里边可以配置

//src/router/index.js

// 配置路由相关信息
import Vue from 'vue'    //引入vue
import Router from 'vue-router'    //引入vue-router
import HelloWorld from '@/components/HelloWorld'    //随便一个示例组件

//1.通过Vue.use(插件)，安装插件
Vue.use(Router)          //插件使用需要通过Vue.use(插件)配置以后才可使用

//2.创建VueRouter对象
const routes = [
  {
    path: "/",
    redirect: "/home",      //加载时就显示的默认路由
  },
  {
    path: "/home",        //路由路径
    name: "helloworld",        //名称
    component: HelloWorld        //路由显示的内容（也可以说是组件）
  }
]          //创建一个数组，router需要通过一个数组来进行配置
const router = new Router({
  //配置路由和组件之间的应用关系
  routes,            //将routes传入router里使用
  mode: "history",    //链接地址中不再显示#号，显示方式为window.history模式
  linkActiveClass: "active"   //选中的路由的class名
})

//将router对象传出，即可在vue实例中使用
export default router

路由创建完以后，在main.js中进行引入

import Vue from 'vue'
import App from './App'
import router from "./router"

new Vue({
  el: '#app',
  router,        //引入router
  render: h => h(App)
})

引入完成后，路由就可以在App.vue中使用

<!-- App.vue -->
<template>
  <div id="app">
    <img src="">
    <!--tag属性可以设置router-link渲染成什么标签；to属性指定跳转的链接-->
    <router-link to='/home' tag='button'>首页</router-link>
    <router-link to='/home'  replace>首页</router-link> <!--replace属性可以让用户无法左上角返回按钮返回上一页-->
    <router-view/>        <!--会被解析路由所对应的组件内容-->
  </div>
</template>
如何通过代码方式，调用router自带的方法进行路由跳转呢？
<!-- App.vue -->
<template>
  <div id="app">
    <button @click='click1'>关于</button>
    <button @click='click2'>首页</button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    click1(){
      this.$router.push("/about");    // push方式，用于可以按左上角返回上一页
    },
    click2(){
      this.$router.replace("/home");    // replace方式，用于不可以按左上角返回上一页
    }
  }
}
</script>

动态路由

直接了当一点：

<!--router/index.js-->
routes:[
  {
    path: "/user/:userid",    <!--这个:userid就是在index.js中的路由上需要配置的值，在App.vue中对应使用-->
    name: "user",
    component: user
  }
]

<!--App.vue-->
<template>
  <div id="app">
    <router-link :to="'/user/'+userid">用户</router-link>    <!--在App.vue中绑定动态路由数值-->
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return {
      userid:"zhangsan"
    }
  },
};
</script>

想要获取当前路由中的参数值？$route

<!--user.vue-->
<script>
   export default{
    name: "user",
    methods:{
      lookUserid(){
        console.log(this.$route.params.userid);
      }
    }
  }
</script>
拿到的userid值

路由懒加载方式

有些时候业务代码量过大，会造成加载很慢，这个时候可以通过懒加载的方式对app进行分包加载，用到的时候再去请求

<!--router/index.js-->
const helloWorld = () => import(../components/helloWorld)    //需要的时候再去import请求
const user = () => import(../components/user)

const routes = [
  {
    path: "/home",
    component: HelloWorld
  },
  {
    path: "/user",
    component: user
  }
]

路由传参

2种方式：一种是通过params进行传参，一种是通过query进行传参

第一种：params传参
<!--router/index.js-->
const user = () => import("../components/user")
const routes = [
  {
    path: "/user/:userid",
    component: user,
  },
 ]


<!--App.vue-->
<template>
  <router-link :to="'/user/'+userid">用户</router-link>    //params值传参
  <button @click="paramschuancan">用户button</button>    //params值传参
</template>

<script>
export default {
  name: "App",
  methods: {
    paramschuancan() {
      this.$router.push("/user/" + this.userid);        //此处的userid跟router/index.js中，route配置时填写的userid对应
    },
  }
}
</script>


<!--对应组件中，例如user.vue-->
<template>
  <div>
    <h2>这里是用户，是用来测试路由传参，看链接中的参数</h2>
    通过$route.params方法查看页面传入的参数:{{$route.params.userid}}
  </div>
</template>
第二种：query传参
<!--APP.vue-->
<template>
  <div id="app">
    <router-link :to="{path:'/dangan',query:{name:'wangwu',age:'18',height:'1.88'}}">档案</router-link>    //query传参
    <button @click="querychuancan">档案button</button>    //query传参
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    querychuancan() {
      this.$router.replace({
        path: "/dangan",
        query: {
          name: "xiaoliu",
          age: "19",
          height: "1.78"
        }
      });
    }
  }
}
</script>


<!--对应组件中，例如dangan.vue-->
<template>
  <div>
    <h2>这里是档案，是用来测试路由传参用的，看链接中的参数</h2>
    通过$.route.query方法查看页面传入的参数:{{$route.query.name}},{{$route.query.age}},{{$route.query.height}}
  </div>
</template>

导航守卫

我们需要在切换页面以及url的时候，需要动态修改页面的title，不然一直会是index.html的title
一种方法自然就是通过在各个.vue中配置生命周期钩子来动态设置document.title，不过这种方法需要一个个文件配置，繁琐又麻烦，这里既然是路由，自然要通过路由的方法：全局导航守卫

<!--router/index.js-->
const routes = [
  {
    path: "/home",
    component: home, 
    meta: {
      title: "首页"
    }  
  }
]
router.beforeEach((to,form,next) => {    //to:跳转到的路由  form:从哪个路由跳转  next:必须执行的下一步方法
  document.title = to.meta.title
  next()        //执行完上边想要执行的操作以后，务必调用next()，不然不会往下走
                //可以next(false)，这样可以阻止进入to页面，重新返回到from页面；
                //或者是next('/home')，中断当前路由，不去to页面，重定向一个页面
})

后置钩子

顾名思义是在切换路由以后运行的

<!--router/index.js-->
router.afterEach((to,from) => {    //后置钩子不需要next
  console.log(to.meta.title);
})

路由独享守卫

只有进入当前路由才会执行的守卫

<!--router/index.js-->
const routes = [
  {
    path: "/user",
    component: user,
    beforeEnter: ((to,from,next) => {
      console.log("这里是user的独享守卫")
    })
  }
]

keep-alive

字面意思保持存活，就是说在切换页面时不销毁上一个组件，因为按照生命周期，路由切换的时候，上一页组件是会被销毁的。使用方法就是：在router-view组件外边包上一个keep-alive

<!--某个.vue文件-->
<keep-alive>
  <router-view></router-view>
</keep-alive>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343