Vue路由知识点总结

路由

用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

起步

我们来看一下脚手架的给我们大家的路由实例：

//导入创建路由对象方法和hash 模式路径方法
import { createRouter, createWebHashHistory } from 'vue-router
//创建路由表
const routes = [
{
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
},
{
    path: '/about/:id',
    name: 'About',
    component: () => import('../views/About.vue')
},
]
//创建路由对象
const router = createRouter({
  history: createWebHashHistory(),//hash模式路径
  routes//路由表
})
//导出路由对象
export default router

如何使用路由

//to属性指定路由路径
Home |
About
//router-view为路由视图

动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

//路由表
{
    path: '/about/:id/:name',
    name: 'About',
    component: () => import('../views/About.vue'),
 }
//App.vue
About

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

//About.vue
{{$route.params.id}}

响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

//Home.vue
watch:{
    $route(to, from) {
      console.log(to)
      console.log(from)
    }
 }

匹配所有路径

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：

{     
// 匹配所有路径  vue2使用*   vue3使用/:pathMatch(.*)    
path:"*",//vue2
path: "/:pathMatch(.*)", 
path: '/stu:pathMatch(.*)',//可以以什么开头    
name: "404",     
component: () => import('../views/404.vue')  
}

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

//404.vue
{{$route.params.pathMatch}}

匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。

嵌套路由

在项目中，我们的路由可能会更加复杂，例如About路由中还需要嵌套子路由，分别显示demo01/demo02/demo03三个子模块，我们就需要为About路由添加children属性，并创建About模块的路由视图：

children:[
      {path:'demo01',component: () => import('../views/demo01.vue')},
      {path:'demo02',component: () => import('../views/demo02.vue')}，
      {path:'demo03',component: () => import('../views/demo03.vue')}
    ]

编程式的导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
注意：在 Vue 实例内部，你可以通过 $router访问路由实例。因此你可以调用this.$router.push。

this.$router.push()
// 字符串 
router.push('home')
// 对象 
router.push({ path: 'home' })
// 命名的路由 
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private 
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.replace()
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

User

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

//APP.vue



//路由表
components: {
    default: Foo,
    a: Bar,
    b: Baz
}

重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

别名

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
取代与 $route 的耦合

User {{ $route.params.id }}
'

通过 props 解耦

//实例
props: ['id']
//路由表
{ path: '/user/:id', component: User, props: true },

布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性
对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

props: { id: 456 }

函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

props:route => ({ id: route.params.id })//在这里你可以选择对接收到的参数做一些处理

History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式

//History 模式(不带#)
import { createRouter, createWebHistory } from 'vue-router'
//Hash 模式(带#)
import { createRouter, createWebHashHistory } from 'vue-router'

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
后台配置

1. 打包

//vue.config.js
module.exports = {
    publicPath: '/',// 部署应用包时的基本 URL
    outputDir: 'dist',//输出的包的名称
    assetsDir: 'static',//静态资源文件夹
}

2. 新建.htaccess文件放入包中

   
RewriteEngine On   RewriteBase /   
RewriteRule ^index\.html$ - [L]   
RewriteCond %{REQUEST_FILENAME} !-f   
RewriteCond %{REQUEST_FILENAME} !-d   
RewriteRule . /index.html [L] 

3. 配置apache服务器
   找到apache安装目录 etc/httpd/conf/ 下的 httpd.conf 文件
   找到“LoadModule rewrite_module modules/mod_rewrite.so”，将前面的"#"号删除。
   修改httpd.conf -> “AllowOverride None” 为 “AllowOverride All”
4. 重启apache

$router 和 $route的

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫

//以判断用户是否登录为例
router.beforeEach((to, from, next) => {
   if(cookie.get('login'))
   next()
   else{
    if (to.path !== "/login") {
      next({ path: "/login" });
    } else {
      next();
    }
   }   
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

全局解析守卫（组件）

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身，导航被确认后，全局后置钩子被调用：

router.afterEach((to, from) => {
  // ...
})

路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫，在全局前置守卫触发后， beforeEnter 守卫被调用：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的守卫

最后，你可以在路由组件内直接定义以下路由导航守卫：

beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 举例来说，对于一个带有动态参数的路径 /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 的回调函数，创建好的组件实例会作为回调函数的参数传入。

路由元信息

定义路由的时候可以配置 meta 字段：
一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

//路由表
meta: { requiresAuth: true }
//About.vue
{{$route.matched[0].meta}}

过渡效果
V3写法:

//app.vue


  


//CSS
#nav a.router-link-exact-active{color:#42b983;}
.fade-enter-active,.fade-leave-active{transition: opacity .5s;}
.fade-enter,.fade-leave-to{opacity: 0;}

滚动行为
V3写法：

scrollBehavior (to, from, savedPosition) {  
      return { left: 0, top: 0 }
    //vue2  {x:0,y:0}
}