Vue Router基础(上)

浅浅的花香味﹌ 2023-02-14 15:36 9阅读 0赞

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得简单。包含的功能有：

*  嵌套的路由/视图表
 *  模块化的、基于组件的路由配置
 *  路由参数、查询、通配符
 *  基于 Vue.js 过渡系统的视图过渡效果
 *  细粒度的导航控制
 *  带有自动激活的 CSS class 的链接
 *  HTML5 历史模式或 hash 模式，在 IE9 中自动降级
 *  自定义的滚动条行为

### 直接下载 / CDN ###

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js` 这样指定 版本号 或者 Tag。

在 Vue 后面加载 `vue-router`，它会自动安装的：

NPM

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 `Vue.use()` 明确地安装路由功能：

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

如果使用全局的 script 标签，则无须如此 (手动安装)。

构建开发版

如果你想使用最新的开发版，就得从 GitHub 上直接 clone，然后自己 build 一个 `vue-router`。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
    cd node_modules/vue-router
    npm install
    npm run build

用 Vue.js + Vue Router 创建单页应用，可以通过组合组件来组成应用程序，把 Vue Router 添加进来，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染

HTML

JavaScript

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
    
    // 1. 定义 (路由) 组件。
    // 可以从其他文件 import 进来
    const Off = { template: '<div>极客教程</div>' }
    const Show = { template: '<div>Vue的学习教程</div>' }
    
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      { path: '/off', component: Off },
      { path: '/shut', component: Shut }
    ]
    
    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })
    
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')

通过注入路由器，我们可以在任何组件内通过 `this.$router` 访问路由器，也可以通过 `this.$route` 访问当前路由：

// Main.vue
    export default {
      computed: {
        username () {
          // 我们很快就会看到 `params` 是什么
          return this.$route.params.username
        }
      },
      methods: {
        goBack () {
          window.history.length > 1
            ? this.$router.go(-1)
            : this.$router.push('/')
        }
      }
    }

`this.$router` 和 `router` 使用起来完全一样.我们使用 `this.$router` 的原因是并不想在每个独立需要封装路由的组件中都导入路由。

当 `<router-link>` 对应的路由匹配成功，将自动设置 class 属性值 `.router-link-active`

动态路由匹配

经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，有一个 `User` 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，可以在 `vue-router` 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

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

`/user/foo` 和 `/user/bar` 都将映射到相同的路由

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

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

具体例子代码:

可以在一个路由中设置多段“路径参数”，对应的值都会设置到 `$route.params` 中。例如：

<table> 
 <thead> 
  <tr> 
   <th>模式</th> 
   <th>匹配路径</th> 
   <th>$route.params</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/user/:username</td> 
   <td>/user/evan</td> 
   <td><code>{ username: 'evan' }</code></td> 
  </tr> 
  <tr> 
   <td>/user/:username/post/:post_id</td> 
   <td>/user/evan/post/123</td> 
   <td><code>{ username: 'evan', post_id: '123' }</code></td> 
  </tr> 
 </tbody> 
</table>

除了 `$route.params` 外，`$route` 对象还提供了其它有用的信息，例如，`$route.query` (如果 URL 中有查询参数)、`$route.hash` 等等

响应路由参数的变化

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

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) `$route` 对象：

const User = {
      template: '...',
      watch: {
        '$route' (to, from) {
          // 对路由变化作出响应...
        }
      }
    }

或者使用 2.2 中引入的 `beforeRouteUpdate`

const User = {
      template: '...',
      beforeRouteUpdate (to, from, next) {
        // react to route changes...
        // don't forget to call next()
      }
    }

捕获所有路由或 404 Not found 路由

常规参数只会匹配被 `/` 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (`*`)：

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

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 `{ path: '*' }` 通常用于客户端 404 错误

当使用一个通配符时，`$route.params` 内会自动添加一个名为 `pathMatch` 参数。它包含了 URL 通过通配符被匹配的部分：

// 给出一个路由 { path: '/user-*' }
    this.$router.push('/user-admin')
    this.$route.params.pathMatch // 'admin'
    // 给出一个路由 { path: '*' }
    this.$router.push('/non-existing')
    this.$route.params.pathMatch // '/non-existing'

高级匹配模式

`vue-router` 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    //匹配使用path-to-regexp，它是使用的匹配引擎
    //也可以表达，因此适用相同的匹配规则
    //有关详细规则，请参阅https://github.com/pillarjs/path-to-regexp
    const router = new VueRouter({
      mode: 'history',
      base: __dirname,
      routes: [
        { path: '/' },
       // params用冒号":"表示
        { path: '/params/:foo/:bar' },
       //通过添加“？”可以使param成为可选项
        { path: '/optional-params/:foo?' },
         //一个param可以跟随parens中的正则表达式
        //此路由仅在以下情况下匹配：id为所有数字
        { path: '/params-with-regex/:id(\\d+)' },
           //星号可以匹配任何东西
        { path: '/asterisk/*' },
            //通过用parens包装并添加“？”来使路径的一部分可选and add "?"
        { path: '/optional-group/(foo/)?bar' }
      ]
    })
    
    new Vue({
      router,
      template: `
        <div id="app">
          <h1>Route Matching</h1>
          <ul>
            <li><router-link to="/">/</router-link></li>
            <li><router-link to="/params/foo/bar">/params/foo/bar</router-link></li>
            <li><router-link to="/optional-params">/optional-params</router-link></li>
            <li><router-link to="/optional-params/foo">/optional-params/foo</router-link></li>
            <li><router-link to="/params-with-regex/123">/params-with-regex/123</router-link></li>
            <li><router-link to="/params-with-regex/abc">/params-with-regex/abc</router-link></li>
            <li><router-link to="/asterisk/foo">/asterisk/foo</router-link></li>
            <li><router-link to="/asterisk/foo/bar">/asterisk/foo/bar</router-link></li>
            <li><router-link to="/optional-group/bar">/optional-group/bar</router-link></li>
            <li><router-link to="/optional-group/foo/bar">/optional-group/foo/bar</router-link></li>
          </ul>
          <p>Route context</p>
          <pre>{
        { JSON.stringify($route, null, 2) }}</pre>
        </div>
      `
    }).$mount('#app')

匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高