一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 16 天，点击查看活动详情。

路由

单页面应用实现不同内容页面自由切换

路由基础

安装 Vue2安装vue-router@3

// 需要指定版本3，否则取最新4x
npm install vue-router@3

// 如果是使用vuecli的项目可以以项目插件的形式添加 Vue Router, CLI 可以生成路由配置的demo文件。同时它也会覆盖你的 App.vue(注意备份)
vue add router

配置路由

在 router/index.js 中配置路由

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

路由懒加载

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

在上述路由配置代码中，Vue 的异步组件和 Webpack 的代码分割功能，实现了路由组件的懒加载。

webpack 把import的组件打包成一个chunk （webpack+es6语法）
把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件（初始用户不访问不加载，用户访问时才加载）
路由出口(<router-view/>)

在项目根组件中使用<router-view>组件，渲染路径匹配到的视图组件；

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

导航（<router-link/>）通过<router-link/>组件，设置导航链接，跳转指定地址（to属性指定目的地址）；默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签

动态路由

1、定义路由两种方式
1）声明式，在标签中：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

2）编程式，在js中：

router.push({ name: 'user', params: { userId: 123 }})

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:userId', component: User }
  ]
})

2、router实例中path 如若没有配置的 :userId, ，会造成返回页面或刷新页面时，参数丢失问题。

上述，在浏览器中的url地址是 /user/123;
页面取params传的参数：$route.params.userId

如果没有配置动态路径参数，浏览器中的url地址不会拼接参数即显示 '/user', 且刷新页面参数会丢失；

3、路由参数使用注意当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。
因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过这样组件的生命周期钩子不会再被调用。

4、通配符(*)

// 配置js
{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

// 路由跳转
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

含有通配符的路由应该放在最后

比如路由 { path: '*' } ，当匹配不到页面时，显示 404 错误页面。
当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分

[vue] 路由(一)

路由

路由基础

动态路由