Vue-Router_vue路由跳转到el-main-CSDN博客

//配置路由的相关信息

import Vue from 'vue'
//0.导入vue-router
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '../components/Home'
import About from '../components/About'
import * as path from "path";

//1、通过Vue.use(插件)安装插件
Vue.use(Router)

//路径和组件的映射关系
const routes=[
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path:'/home',
    name:'home',
    component:Home
  },
  {
    path:'/about',
    name:'about',
    component:About
  }
]


//创建路由对象并导出
export default new Router({

  //配置路径和组件的映射关系
  routes,

})

在main.js中挂载路由

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

在Vue中使用路由

在切换内容时，切换是router-view挂载的组件，其他内容时不会改变的。

配置路由的默认路径

配置路由的默认路径

修改为history模式

history模式

router-link的其他属性补充

to：指定跳转的路径；

tag：指定router-link将被渲染成什么标签；

replace:"无痕"效果；

active-class：指定选中的router-link的class，或者在index.js中进行配置

在代码中跳转路由

Vue-Router动态路由的使用

在某些情况相下，一个页面的path可能是不确定的

通过$route.param.xxx拿到请求参数

打包文件的解析

路由懒加载的使用

当打包构建应用时，JavaScript包会变得非常大，影响页面加载

我们可以将不同路由对应的组件分隔成不同的代码块，当路由被访问时才加载对应的组件，可以提高加载效率。

路由的嵌套使用

创建对应的子组件，并在对应的路由映射中配置对应的子路由
在组件内部使用router-view标签

Vue-Router参数传递

（一）动态路由传参

见上

（二）query传参

两个传参方式效果一致

取参数

导航守卫（前置钩子）

有一点类似aop

要实现调整网页的title

第一种方法：

标题

但是这样要在每一个组件都实现，比较麻烦，

可以使用全局导航守卫，

在路由配置中添加一些属性

配置路由监控

后置钩子和其他钩子补充

//后置钩子:在路由跳转完之后可以进行一些操作
router.afterEach((to, from)=>{
  console.log(to.meta.title)
})

除此之外还有路由独享守卫，组件内的守卫，可以自己了解。

路由独享守卫

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

组件内的守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

keep-alive

keep-alive是Vue内置的一个组件，可以使被包含组件保留状态，或者避免重新渲染
而router-view也是一个组件，如果被直接包在keep-alive里边，所有路径匹配到的视图组件都会被缓存

keep-alive的属性介绍：

exclude：匹配的组件都不会被缓存

include ：只有名称匹配的组件会被缓存

max：最多可以缓存多少组件实例

keep-alive激活的声明周期函数：

1. activated

在 keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用

2. deactivated

在 keep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。