Vue-Router

vue-router 是指定的路由库，它通过管理 URL，实现组件间切换，和状态 (state) 的变化。类似 React 中的 react-router

装包

  1. npm install vue-router --save

注入 router

导入 router

  1. import router from './router'

将 router 注入到组件中

  1. new Vue({
  2.   el: '#app',
  3.   router,
  4.   template: '<App/>',
  5.   components: { App }
  6. })

创建 Router

如果用 vue-cli 创建项目时添加了路由，会自动创建

数据结构 为：src 文件夹 -> router 文件夹 -> index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. // 引用 vuex插件
  4. import Home from '@/components/Home'
  5. // 导入 Home 组件
  7. Vue.use(Router)
  8. // 安装使用 Router 插件
  10. export default new Router({
  11. // 构建一个新的 Router
  12.   mode: 'history',
  13.   //路由模式为 history
  14.   routes: [
  15.     //添加路由组件
  16.     {
  17.       path: '/',
  18.       //跳转路径
  19.       name: 'Home',
  20.       //名称
  21.       component: Home
  22.       //跳转到组件
  23.     }
  24.   ]
  25. })

使用

<router-view>

主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染你使用 vue-router 指定的组件

在模板组件中用<router-view>进行包裹

  1. <template>
  2.   <div id="app">
  3.     <router-view></router-view>
  4.   </div>
  5. </template>

<router-link>

<router-link>用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是<a>元素的 Vue 版本，可以接收状态值，to 表示跳转链接

  1. <template>
  2.   <div class="Home">
  3.      <router-link to="/post">Post</router-link>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'Home'
  10. }
  11. </script>

动态路由匹配

在 Router配置文件index.js中，写路由路径path时使用『动态路径参数』

  1. routes: [
  2.    // 动态路径参数 以冒号开头
  3.    {
  4.      path: '/user/:id',
  5.      name: 'user',
  6.      component: User
  7.    }
  8.  ]

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

  1. const User = {
  2.   template: '<div>User {{ $route.params.id }}</div>'
  3. }

重定向

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

  1. const router = new VueRouter({
  2.   routes: [
  3.     { path: '/a', redirect: '/b' }
  4.   ]
  5. })

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

  1. const router = new VueRouter({
  2.   routes: [
  3.     { path: '/a', redirect: { name: 'foo' }}
  4.   ]
  5. })

甚至是一个方法，动态返回重定向目标：

  1. const router = new VueRouter({
  2.   routes: [
  3.     { path: '/a', redirect: to => {
  4.       // 方法接收 目标路由 作为参数
  5.       // return 重定向的 字符串路径/路径对象
  6.     }}
  7.   ]
  8. })

别名

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

上面对应的路由配置为：

  1. const router = new VueRouter({
  2.   routes: [
  3.     { path: '/a', component: A, alias: '/b' }
  4.   ]
  5. })

『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构

参考