首先需要在项目中引入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>
