这篇博客记录了vue router使用过程中常用和需要掌握的点的知识点和具体用法，希望能对你有所帮助，欢迎交流。
一.子路由
子路由指的是路由页面里面的路由 路由到的页面里面还有一个
<template>
<div>
<div>user</div>
<!--子路由在此-->
<router-view class="aaa"></router-view>
</div>
</template>
<script>
export default {};
</script>
<style lang="less">
</style>
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/User/login.vue'
import Register from '../views/User/register.vue'
import User from '../views/user.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/user',
// name: 'Home',
component: User,
children: [
{
path: '/',
component: User
},
{
path: 'login',
component: Login
},
{
path: 'register',
component: Register
}
]
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
路由配置先到某一级路由 这个路由先有自己的组件，如果不访问子路由则访问的直接是该组件，如果有配置子路由：
/ 对应的还是该组件 里面的还是该组件；
/xxx 对应组件里面要替换的组件；
从这个角度其实子路由就是子组件的路由
思考
普通tab如果内部独立性强适合划分大模块 也可以考虑使用路由实现
二.vue-router 的参数传递
两种方法
1.使用name
在路由组件内使用 $router.name可获取在router.js配置的该路由组件的name
2.使用params
在标签配置动态的to属性
<router-link :to="{name: 'login',params:{userName: 'lj'}}">login</router-link>
获取的时候 在对应的路由组件内使用
<div>{{$route.params.userName}}</div>
即可获取到传来的参数
三.单页面多路由区域操作
可以起不同的名字来做区分
<router-view />
<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>
再将不同的路径对应匹配到多个不同的
{
path: '/',
components: {
default: Home,
left: Login,
right: Register
}
},
{
path: '/about',
components: {
default: Home,
left: Register,
right: Login
}
}
四.通过url传参
其实本质上还是路径的匹配， 在router.js里面可以给path中某一层的路径配置为可传递参数的形式
{
path: '/user',
// name: 'Home',
component: User,
children: [
{
//子组件是自己本身
path: '/',
name: 'UserHere',
component: User
},
{
//还是正常匹配路劲 所唯一不同的是这里第一层必须为login，第二层和第三层随便什么字符串都可以 就能将对应层的字符串映射到newsId newsTitle这两个变量中
//和原来唯一不同的是 原来每一层路径都是写死的 现在可以通过支持变量传参的形式 在匹配路径的同时（带：的路径可以匹配任何字符串），实现传参
path: 'login/:newsId/newsTitle',
name: 'login',
component: Login
},
{
path: 'register',
name: 'uuuuu',
component: Register
}
]
},
使用如下将newsTitle作为参数传给了newsTitle参数
{
path: '/user',
// name: 'Home',
component: User,
children: [
{
//子组件是自己本身
path: '/',
name: 'UserHere',
component: User
},
{
//还是正常匹配路劲 所唯一不同的是这里第一层必须为login，第二层和第三层随便什么字符串都可以 就能将对应层的字符串映射到newsId newsTitle这两个变量中
//和原来唯一不同的是 原来每一层路径都是写死的 现在可以通过支持变量传参的形式 在匹配路径的同时（带：的路径可以匹配任何字符串），实现传参
path: 'login/:newsId/newsTitle',
name: 'login',
component: Login
},
{
path: 'register',
name: 'uuuuu',
component: Register
}
]
},
五.路由的重定向 rdirecte
在route.js中 对应path下指定redirect到某个新路径就可以，它的特点是可以实现路径上看到效果的切换
{
path: '/goBack',
redirect: '/'
}
六.路由的别名 alias
为某一个路径起一个别名，匹配到别名的路径和匹配到真实路劲的效果一致。 如：
{
path: '/about',
component: About,
alias: '/uuuuu/test'
},
这样访问about 和访问 /uuuuu/test效果都是一样的，起了个别名
别名和redirect的不同在于：
alias: 不同的名字而已，在路径上看得到别名的访问
七.路由的过渡动画
可以使用来实现过渡动画
<!--注意这里使用的 mode="out-in" 先出去再进来-->
<transition name="fade" mode="out-in">
<router-view />
</transition>
.fade-enter {
opacity: 0;
}
.fade-leave {
opacity: 1;
}
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-leave-active {
opacity: 0;
transition: opacity 0.5s;
}
八.mode选择
VueRouter提供两种模式hash 和 history
const router = new VueRouter({
mode: 'history',
// mode: 'hash',
base: process.env.BASE_URL,
routes
})
1.hash在访问时路由相关会有前缀# 因为这的确是单页面的
九.设置404的处理页面
在router.js 中配制
{
path: '*',
component: Error
}
之后在routes中没有能够正常匹配到的路径都会走到这里，让不存在的路径走到404 这里估计*是匹配所有的路径的，如果有确切的路劲实现就走确切的实现，如果没有就会走到*的指定
十.路由中的钩子
1.钩子函数可以在配置能文件中写, 在配置文件中只能写一个beforeEnter
{
path: '/user',
// name: 'Home',
component: User,
beforeEnter: (to, from, next) => {
console.log("to", to, "from", from, "next", next);
// next()
},
children: [
{
//子组件是自己本身
path: '/',
name: 'UserHere',
component: User
},
{
//还是正常匹配路劲 所唯一不同的是这里第一层必须为login，第二层和第三层随便什么字符串都可以 就能将对应层的字符串映射到newsId newsTitle这两个变量中
//和原来唯一不同的是 原来每一层路径都是写死的 现在可以通过支持变量传参的形式 在匹配路径的同时（带：的路径可以匹配任何字符串），实现传参
path: 'login/:newsId/:newsTitle',
name: 'login',
component: Login
},
{
path: 'register',
name: 'uuuuu',
component: Register
}
]
},
里面三个参数 to from next
1.to:路由将要跳转的路径信息，信息是包含在对像里边的。
2.from:路径跳转前的路径信息，也是一个对象的形式。
3.next:路由的控制参数，常用的有next(true)和next(false)。
next(false) 和不写一样都不会跳转
next(true) 才会正常进入对应路由页面
2.在路由对应组件内写钩子函数
在组件模板中可以使用两钩子函数 在配置文件的beforeEnter基础上替换钩子的名字为beforeRouteEnter
beforeRouteEnter：在路由进入前的钩子函数。
beforeRouteLeave：在路由离开前的钩子函数。
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<script>
export default {
beforeRouteEnter(to, from, next) {
console.log("进入about 前");
console.log("to", to);
console.log("from", from);
console.log("next", next);
next();
},
beforeRouteLeave(to, from, next) {
console.log("离开about 前");
console.log("to", to);
console.log("from", from);
console.log("next", next);
next();
}
};
</script>
使用效果
十一.编程式导航
原来的导航是通过来指定，这样只能在模板上控制，显然是不够灵活的，我们需要在业务逻辑的代码中也能够用它
//前进
go() {
this.$router.go(1);
},
//后退
goBack() {
this.$router.go(-1);
},
//跳转指定的页面
goHome() {
this.$router.push("/");
}
注意
在组件中使用的route是不一样的
route：当前路由相关信息
