vue-router相关知识整理(非常详细)

今天学习了一下vue router相关知识，了解了vue-router的基本使用，vue-router的懒加载写法，vue路由的嵌套，vue-router参数传递，vue路由的$router和$route的区别，vue路由的全局导航守卫等知识，今天就跟大家分享下。

一：vue-router的基本使用

前期准备：需要安装node.js，npm等工具，安装好vue-cli脚手架之后，使用vue init webpack 项目名 的命令创建一个vue-cli的项目，创建项目时会询问你是否安装vue-router，选择yes即可

创建完成之后我们可以看到目录结构中包含一个router文件夹，里面有个index.js文件

首先我们打开index.js文件

可以看到改行代码Vue.use(Router)表示这里会使用vue router,这个Router就是我们安装的vue-router对象

这行代码下面的内容就是声明一个路由对象并导出，对象里面包含routes数组，这个数组里时一个一个具体的对象，对象包含path路径，component使用哪个组件，redirect表示跳转，children代表该路由下还有嵌套路由

如果是简单的路由跳转，比如主页跳转到其他页面，你就需要写一个新的vue文件Other.vue

<template>
  <div>
      我是其他页面
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      msg: 'User'
    }
  }
}
</script>

来到router文件下的index.js文件，我们需要在这个文件夹中使用Other.vue和Home.vue文件，所以我们要用import导入文件

import Vue from 'vue'
import Router from 'vue-router'
import Other from '../components/Other'
import Home from '../components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/other',
      component: Other
    },
    {
      path:'/home',
      component: Home
    }
  ]
})

然后我们怎么去使用这个路由，我们要去主页面App.vue把我们写好的Home组件和Other组件展示并实现前端路由

我们就要用到router-link和router-view

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <router-link to="/home"  tag="button" replace>首页</router-link>
    <router-link to="/about" replace>about</router-link>
    <router-link :to="'/user/'+userId" replace>用户</router-link> -->
    <!-- <button @click="linkToHome">首页</button>
    <button @click="linkToAbout">分页</button> -->
    <router-link to="/home">主页</router-link>
    <router-link to="/other">其他页面</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userId:"zhangsan"
    }
  }
  // ,
  // methods: {
  //   linkToHome(){
  //     console.log("跳转去主页");
  //     this.$router.push("/home");
  //   },
  //   linkToAbout(){
  //     console.log("跳转去分页");
  //     this.$router.replace("/about");
  //   }
  // }
}
</script>

<style>

</style>

写好之后我们就可以访问页面了，效果如下：

二：vue-router有一种懒加载的写法，我们知道项目运行npm run build之后会在dist文件夹下生成三个js文件

app开头的就是项目中我们写的代码生成的js文件

manifest开头是底层支持的一些代码

vendor开头的js就是我们引用的第三方的js代码

实际项目中我们的代码会有很多，如果所有的代码都申城一个js文件，到时候浏览器加载js的时候就会很慢，导致客户体验不友好，那么这时候我们就要用到路由懒加载的写法，就是我们需要哪个路由页面我们就去加载相应页面的js文件，这样我们就会生成多个js文件，根据我们的路由模块，从而不会把所有的文件都集中到一个app开头的js文件中

具体改成如下写法

import Vue from 'vue'
import Router from 'vue-router'
// import Other from '../components/Other'
// import Home from '../components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/other',
      component: () => import("../components/Other")
    },
    {
      path:'/home',
      component: () => import("../components/Home")
    }
  ]
})

我们再次执行npm run build

这次我们就看到有五个js文件，其中多的两个js文件就是我们刚刚配置的懒加载形式而多生成的两个文件

三.vue-router的嵌套

如果我们在首页里还有两个跳转页面，我们这个时候就要用到路由嵌套

具体就是配置一个children属性，新增两个vue文件

HomeNews.vue：

<template>
  <div>
    <h2>新闻</h2>
  </div>
</template>

<script>
export default {
  name: 'HomeNews',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

HomeMessage.vue：

<template>
  <div>
    <h2>消息</h2>
  </div>
</template>

<script>
export default {
  name: 'HomeMessage',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

router/index.js文件修改如下：

import Vue from 'vue'
import Router from 'vue-router'
// import Other from '../components/Other'
// import Home from '../components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/other',
      component: () => import("../components/Other")
    },
    {
      path:'/home',
      component: () => import("../components/Home"),
      children: [
        {
          path: 'new',
          component: () => import("../components/HomeNews")
        },
        {
          path: 'message',
          component: () => import("../components/HomeMessage")
        }
      ]
    }
  ]
})

Home.vue代码：

<template>
  <div>我是首页哈哈哈{{msg}}
    <router-link tag="button" to="/home/news">新闻</router-link>
    <router-link tag="button" to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

运行结果如下

我们注意到路径上总是有个#，

那是因为默认这个路由使用的hash方式处理这个路径，可以在路由的配置中加上mode:"history"来改变，使其使用html5的history方式显示这个路径：

结果如下：

 

四.vue-router参数传递

第一种情况：如果我们服务器传到前端的用户数据，需要在url地址栏末尾加上一个userId的值，比如http://localhost:8080/user/2356

首先我们先创建一个User.vue文件：

<template>
  <div>我是用户页面{{msg}}
      <!-- 拿到的userId:
        <h2>{{uid}}</h2>
        <h2>{{$route.params.userId}}</h2> -->
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      msg: 'User'
    }
  }
//   ,
//   computed: {
//       uid: function(){
    
//           console.log(this.$route.params);
//           return this.$route.params.userId;
    
//       }
//   }
}
</script>

然后我们修改router下index.js文件：

import Vue from 'vue'
import Router from 'vue-router'
// import Other from '../components/Other'
// import Home from '../components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/other',
      component: () => import("../components/Other")
    },
    {
      path:'/home',
      component: () => import("../components/Home"),
      children: [
        {
          path: 'news',
          component: () => import("../components/HomeNews")
        },
        {
          path: 'message',
          component: () => import("../components/HomeMessage")
        }
      ]
    },
    {
      path:'/user/:userId',
      component: () => import("../components/User")
    }
  ],
  mode:"history"
})

然后我们去App.vue文件添加用户界面的跳转

访问结果如下：

如果想在用户这个组件的界面中再获取到userId这个值可以使用$route.param这个对象

上面两种方式都可以

如果想传递query参数比如http://localhost:8080/message?name=zhangsan&age=9&grade=5

然后我们在项目中获取的话就可以使用$route.query来获取

首先我们来修改Home.vue这个文件，让其传入参数

新增HomeMessage.vue的代码

运行项目访问：

五.vue路由的全局导航守卫

如果想使标签上带有该导航栏的信息，我们就需要使用到meta属性的配置，以及从$route.meta中获取信息

在routes的各个路由下写上title

然后在main.js中使用router.beforeEach()函数

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

Vue.config.productionTip = false

router.beforeEach((to,from,next) => {
  document.title=to.meta.title;
  next();
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

运行结果如下：