vue路由核心要点（vue-router）

Posted 2021-03-08 halfsoul

目录

• 目录
  • 1.vue-router 是什么?
  • 2.如何使用v-router?
  • 3.vue-router跳转和传参
  • 4.vue-router实现的原理
    • 两种模式
  • 5.vue-router 有哪几种导航钩子?
  • 6.$route 和 $router 的区别
  • 7.vue-router响应路由参数的变化
  • 8.vue-router实现路由懒加载（ 动态加载路由 ）

目录

引言：该篇主要讲的是关于vue-router的原理以及使用等问题，以及面试中常被问到的几个点，有部分还未整理后续会继续更新；

1.vue-router 是什么?

Vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的，适合用于构建单页面应用
在之前常用的是用a标签进行跳转，现在做的是单页面应用，所以必须使用v-router进行管理

2.如何使用v-router?

1. 下载

cnpm i vue-router -S

2.在index.js中引入路由的核心模块

import VueRouter from 'vue-router'

3.注册路由插件

Vue.use(VueRouter)

4.创建路由对象并且配置路径
这里有两种情况，一级路径 例如
"/film"可以如下写法即可，表示跳转/cinema页面渲染Cinema组件
注意：别忘了引入该组件

const routes = [
  {
    path: '/cinema',
    component: Cinema
  }
]

嵌套路由：
这种情况下不会把cinema的组件内容覆盖 可以实现单组件切换内容 跟选项卡效果差不多

二级路径："/film/nowplaying"

  {
    path: '/film',
    component: Film,
    children: [{
      path: '/film/nowplaying',
      component: Nowplaying,
    },
    {
      path: '/film/comingsong',
      component: Comingsong,
    }
    ]
  },

5.将路由对象传递给Vue实例

const router = new VueRouter({
  routes: routes
})
export default router

6.配置好之后，需要在显示留坑，否则无法显示在页面上

<router-view></router-view>

完整代码写法如下:

//index.js文件中引入
// 路由的核心模块
import VueRouter from 'vue-router'
import Cinema from '@/views/Cinema'
// 必须要加  注册路由插件
Vue.use(VueRouter)
// 路由映射表
const routes = [
  {
    path: '/cinema',
    component: Cinema
  },
]
const router = new VueRouter({
  routes: routes
})
export default router

main.js

import router from './router' 
//new Vue 启动
new Vue({
  el: '#app',
  //让vue知道我们的路由规则
  router: router, //可以简写router
  render: c => c(App),
})

3.vue-router跳转和传参

1.用name传递参数
在路由文件中配置name属性，组件中用 $router.name来接受

{
    path: '/cinema',
    name：'cinema'
    component: Cinema
  }
  <!--获取-->
  <p>{{ $router.name}}</p>

2.通过 标签中的to传参

<!--需要在路由映射中提前配置好-->
{
    path: '/cinema',
    component: Cinema
  }
  
<router-link :to="{path:'/cinema',params:{key:value}}">666</router-link>
<!--获取-->
{{$route.params.key}}

3.通过url地址栏传参数

  {
    path: '/detail',
    component: Detail
  },
 this.$router.push({path: '/detail', query: {data: datail}}
 <!--获取-->
 {{this.$route.query.data}}

4.vue-router实现的原理

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。 单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面 ;vue-router在实现单页面前端路由时，提供了两种模式,根据mode参数来决定采用哪一种方式

两种模式

1、Hash模式：

单页面应用：页面跳转是无刷新的，但是url 每次变化的时候，都会造成页面的刷新,所以为了解决通过hash来实现路由，在改变 url的情况下，保证页面的不刷新
url hash 类似于

http://www.xxx.com/#/film

这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)

2、History模式：

history 模式时，URL 就像正常的 url，只需要在配置路由规则时，加入"mode: ‘history‘",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

注意:还需要后台配置支持，如果没有正确配置会返回404；服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

5.vue-router 有哪几种导航钩子?

解释:vue-router导航钩子 主要用来作用是拦截导航，让他完成跳转或取消
1. 全局导航钩子
全局导航钩子主要有两种钩子：前置守卫、后置钩子，
注册一个全局前置守卫：

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
    // do someting
});
//to: Route，代表要进入的目标，它是一个路由对象
//from: Route，代表当前正要离开的路由，同样也是一个路由对象
//next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

2. 路由独享的钩子
单个路由独享的导航钩子，它是在路由配置上直接进行定义的

cont router = new VueRouter({
    routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
                // do someting
            }
        }
    ]
});

3. 组建内的导航钩子
组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

const File = {
    template: `<div>This is file</div>`,
    beforeRouteEnter(to, from, next) {
        // do someting
        // 在渲染该组件的对应路由被 confirm 前调用
    },
    beforeRouteUpdate(to, from, next) {
        // do someting
        // 在当前路由改变，但是依然渲染该组件是调用
    },
    beforeRouteLeave(to, from ,next) {
        // do someting
        // 导航离开该组件的对应路由时被调用
    }
}

6.$route 和 $router 的区别

$route :为当前router跳转对象里面可以获取name、path、query、params等

(router :为VueRouter实例，想要导航到不同URL，则使用)router.push方法

返回上一个history也是使用$router.go方法

7.vue-router响应路由参数的变化

例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用
路由参数的变化作出响应可以用以下方法：
1.watch监听,当路由发生变化的时候执行

watch:{

  $route(to,from){

        console.log(to.path);

        // 对路由变化作出响应...

  }

},

2.在父组件的router-view上加个key

<router-view :key="$route.fullPath"></router-view>

8.vue-router实现路由懒加载（ 动态加载路由 ）

const Foo = () => import('./Foo.vue')

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

//有时候想把某个路由下的所有组件都打包在同一个异步快中，需要使用命名chunk，一个特殊的注释语法来提供chunk name（webpack>2.4）

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')