vue-router 是 专门为vue单页面程序设计的路由功能，控制在单页面应用内如何跳转不同的模块（观感上像切换页面一样）
用法很简单，首先，安装：
npm install vue-router -D
新建router.js，写入以下代码
import Vue from 'vue'
import router from 'vue-router'
Vue.use(router)
const baseMenu = [
{
path: '/',
redirect: '/index' // 访问‘/’ 的时候重定向 到 ‘/index’
},
{
path: '/index',
alias: '/home', // 别名 访问 ‘/home’ 的时候路径显示/home ,但是路由使用/index的
component: () => import('@/views/index/index.vue'),
name: 'index'
},
{// path 为* 会匹配所有的路径，即： 其他匹配找不到的路径
// 一定要放到最后，路由匹配规则【越靠前的越优先匹配】
path: '*',
component: () => import('@/views/error/404.vue'),
name: 'index'
},
]
let Router = new router({
routes: baseMenu,
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置; 返回空对象不滚动
// 返回的对象样式:
// { x: number, y: number }
// { selector: string, offset: { x: number, y: number }}
return { x: 0, y: 0 }
// 异步滚动
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
// 平滑滚动
return {
selector: to.hash,
behavior: 'smooth',
}
},
})
export default Router
**在入口文件里引入router,并通过vue实例方法的router 参数注入路由**
import router from './router'
import Vue from './vueMode'
import App from './App.vue'
// 通过 router 配置参数注入路由，
new Vue({
el: '#app',
router,
render: h=> h(App)
})
自此，你便可以访问router里注册好的路径了
访问路由
// router有push, replace ,go 等方法。逻辑同history 的push, replace, go方法
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 如果写了path属性，params 则 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
// 可以name和param一起写
router.push({ name: 'user', params: { userId }}) // -> /user
动态路由
**动态路由是通过正则匹配实现的**
嵌套路由
**路由支持children属性，属性对象同路由对象。**
*路径如果是相对路径则需要会自动拼接父级路径*
const User = {
template: `<div>这是父组件
<router-view/>
<router-view name='a'/>
</div>`
}
{
path: '/user/:id',
component: User,
children: [
// 这里的页面都会在父组件的router-view 标签位置显示；如果没有router-view则无法显示
// router-view可以命名，不命名的名字叫default；路由里要配置components,vue会根据名称显示相应组件
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}，
{
path: '*',
components: {
default:() => import('@/views/index.vue'),
a: () => import('@/views/home.vue')
},
name: '404'
},
}
路由守卫 ：提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
beforeEnter: (to, from, next) => {
// 路由内独享的路由守卫； 只有在跳转到当前路径的时候才会调用
},
afterEnter: (to, from) => {
// 路由内独享的路由守卫； 只有在跳转到当前路径的时候才会调用
}
},
]
})
// 全局前置守卫 第一步
router.beforeEach((to, from, next) => {
// to 要跳转到的路由对象
// from 当前的路由对象
// next 回调函数，处理完成之后需要手动调用才能跳转；不传值next()，是正常跳转；传path是跳转到path. next('/login') / next({ path: '/login' });如果阻止跳转 则next(false)
})
// 全局路由解析 第二步 【2.5.0+新增】 （第一步的next之后）
router.beforeResolve((to, from) => {})
// 全局后置守卫 第三步
router.afterEach((to, from) => {
})
// 【组件内也可以加路由守卫】
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
next(vm => {
// 通过 `vm` 访问组件实例
})
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) { //【2.2.0新增】
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路?? /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
【这是完整的路由守卫调用顺序】
1.导航被触发。
2.在失活的组件里调用 beforeRouteLeave 守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
路由过渡
可以用 transition标签给router加上过渡效果； name 是css class 名，mode 是动画进行的模式
<transition name='fade' mode='ease-in'>
<router-view></router-view>
</transition>
**效果需要自己css设置**
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
官网： https://router.vuejs.org/zh/guide/#html