Vue-Router

一、vue-router的基本使用

1. router -> index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

//1. 安装插件
Vue.use(VueRouter)

//配置路由和组件之间的映射关系
const routes = [
  {
    path: '/',   //默认路径
    redirect:'/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

//2. 创建VueRouter对象
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes  //路由映射配置，已抽离出去
})

//3. 导出router对象，为了传入到Vue实例
export default router

2. main.js :导入router，并在vue中实例挂载router对象

3. 使用路由：

（1）通过和

• 是一个vue-router中已经内置的组件，它默认会被渲染成标签
  • 属性to：用于指定跳转的路径，其值必须和router中映射关系路径相对应
  • tag：指定 渲染成什么组件，已弃用
  • replace：当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
  • active-class：设置链接激活时使用的 CSS 类名，默认值: "router-link-active"，可以通过路由对象的构造选项 linkActiveClass 来统一配置 CSS 类名。
• 该标签会根据当前的路径动态渲染出不同的组件

（2）通过代码跳转

• 该方式可能会导致重复点击时报错，解决办法在index.js添加如下代码

// 解决重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

二、动态路由的使用（路由传递参数）

1. 前端传

2. 中间router接收

3.使用传递的参数

【vue入门笔记补充】

• 前端传（可以传多个参数时使用）

• 中间router接收

  

• 取参数（使用prop）推荐方式

三、路由懒加载（最好都使用懒加载方式）

​ 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

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

在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：

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

四、嵌套路由

1. 路由配置

2. 使用嵌套路由

3. 嵌套路由中也可以设置默认路径

五、vue-router参数传递

1. 方法一：params（如上动态路由的使用）

• 配置路由格式：/router/:id
• 传递的方式：在path后面跟上传递的参数
• 传递后形成的路径，比如：/router/123

2. 方法二：query

• 配置路由格式：/router，也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式

• 传递后形成的路径，比如：/router?id=123

• 取参数

3. 通过编程式跳转，即代码跳转

【注意】$ router和$ route的区别

• $ router是VueRouter的实例，想要跳转到不同URL，则使用$router.push方法
• $ route是当前router跳转对象里面可以获取name,path,query,params等

六、导航（表示路由正在发生改变）守卫

1. 使用 router.beforeEach 注册一个全局前置守卫 跳转之前调用

const router = new VueRouter({ ... })

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

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法才能进入下一个钩子

例如，根据跳转的不同路由，实时更新页面标题

//为各组件添加meta（元语言：描述数据的语言）属性
{
    path: '/about',
    component: About,
    meta:{
      title:'关于'
    }
}

//全局前置守卫
router.beforeEach((to,from,next) => {
  document.title = to.matched[0].meta.title;
  console.log(to)
  next()   //必须调用
})

在用户登录时重定向到 /login：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) 
      next({ name: 'Login' })
  else 
      next()
})

2. 使用 router.afterEach 注册一个全局后置钩子 跳转之后调用

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

3. 路由独享的守卫，在路由配置上直接定义 beforeEnter 守卫：

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

七、keep alive

1. keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，将router-view包在keep-alive中，所有的路径匹配到的视图组件都会被缓存，可以提高网页性能

<keep-alive>
  <router-view></router-view>
</keep-alive>

2. keep-alive中的属性

• include包含，多个时使用空格不能在逗号后加空格

• exclude排除

//使用的是组件中的name属性
<keep-alive exclude="Profile">
  <router-view/>
</keep-alive>

ve中，所有的路径匹配到的视图组件都会被缓存，可以提高网页性能

<keep-alive>
  <router-view></router-view>
</keep-alive>

2. keep-alive中的属性

• include包含，多个时使用空格不能在逗号后加空格

• exclude排除

//使用的是组件中的name属性
<keep-alive exclude="Profile">
  <router-view/>
</keep-alive>

• 在vue文件引入css文件，在style标签使用**@import "..."**