Vuejs生态之vue-router

Z时代
2024-01-10
分类：综合

vue

介绍

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

嵌套的路由/视图表

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于 Vue.js 过渡系统的视图过渡效果

细粒度的导航控制

带有自动激活的 CSS class 的链接

HTML5 历史模式或 hash 模式，在 IE9 中自动降级

自定义的滚动条行为

安装和基本使用

# 模块使用
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/router" title="vue-router">vue-router/3.0.1/vue-router.js"></script>
# NPM工程使用
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此 (手动安装)。

<!-- 基本使用 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <div>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
  <div>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</div>
<!-- 文件引入 -->
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<script>
  // 1. 定义路由
  // 每个路由应该映射一个组件。 其中"component" 可以是
  // 通过 Vue.extend() 创建的组件构造器，
  // 或者，只是一个组件配置对象。
  // 我们晚点再讨论嵌套路由。
  var routes = [
    {
      'path': '/',
      'component': {
        template: `<div><h1>首页</h1></div>`,
      }
    },
    {
      'path': '/about',
      'component': {
        template: `<div><h1>关于我们</h1></div>`,
      }
    }
  ];
  // 2. 创建 router 实例，然后传 `routes` 配置
  // 你还可以传别的配置参数, 不过先这么简单着吧。
  var router = new VueRouter({
    routes: routes  // 可缩写为: routes
  });
  // 3. 创建和挂载根实例。
  // 记得要通过 router 配置参数注入路由，
  // 从而让整个应用都有路由功能
  new Vue({
    el: '#app',
    router: router
  });
  // 现在，应用已经启动了！
</script>
</body>
</html>

基本使用

传参及获取传参

我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件。例如我们有个 `User` 的组件，我们可以这样写：

const routes = [
  {
    // 动态路径参数 以冒号开头
    'path': '/user/:name',
    'component': {
      template: `
        <div>
          <h1>我叫: {{$route.params.name}}</h1>
        </div>
      `,
    }
  },
];
// 例如想获取查询参数 比如路由是  /user/luffy/?age=10
// 可以这样获取  $router.query.age

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

模式	匹配路径	$route.params
/user/:name	/user/evan	`{ name: 'luffy' }`
/user/:name/post/:post_id	/user/evan/post/123	`{ name: 'luffy', post_id: 123 }`

更多API

* 一个路由对象 (route object) 表示当前激活的路由的状态信息.

* 包含了当前 URL 解析得到的信息, 还有 URL 匹配到的路由记录 (route records)

* 路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。

* 路由对象可在多个地方:

* 1、在Vue组件内，即 this.$route

* 2、在 $route 观察者回调内

* 3、router.match(location) 的返回值

* 4、导航守卫的参数：

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

* // `to` 和 `from` 都是路由对象

* })

* 5、scrollBehavior 方法的参数

* const router = new VueRouter({

* scrollBehavior (to, from, savedPosition) {

* // `to` 和 `from` 都是路由对象

* }

* })

对象属性

// 1、$route.path 解释: 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

// 2、$route.params 解释: 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

// 3、$route.query 解释: 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

// 4、$route.hash 解释: 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

// 5、$route.fullPath 解释: 完成解析后的 URL，包含查询参数和 hash 的完整路径。

// 6、$route.matched 解释: 一个数组，包含当前路由的所有嵌套路径片段的路由记录

// 7、$route.name 解释: 当前路由的名称，如果有的话。

// 8、$route.redirectedFrom 解释: 如果存在重定向，即为重定向来源的路由的名字。

LearnMore

子路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件

接着上节：我们在每个username下，都想展示用户的更多信息，/user/:name/more , 那么可以这样做：

// 同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>
const routes = [
  {
    // 动态路径参数 以冒号开头
    'path': '/user/:name',
    'component': {
      template: `
        <div>
          <h1>我叫: {{$route.params.name}}</h1>
          <router-link :to=`/user/${$route.params.name}/more`></router-link>
          // 另一种路由写法(表示在当前路径地址上追加 more，更加简洁)
          // <router-link to="more" append></router-link>
          <router-view></router-view>
        </div>
      `,
    },
    // 写法如同父级路由, 作分发操作
    children: [ 
        {
          // 当 /user/:id/more 匹配成功
          // more 会被渲染在 User 的 <router-view> 中
          path: 'more',
          component: {
             template: `
               <div>
                 <h1>我叫: {{$route.params.name}}</h1>
                 我的详细信息是。。。
               </div>
             `,
           },
        }
      ]
  },
];

View Code

children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

此时，基于上面的配置，当你访问 /user/:name/ 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个空的子路由。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },
        // ...其他子路由
      ]
    }
  ]
})

扩展

编程式导航（手动访问和传参）

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。

1、router.push(location, onComplete?, onAbort?)

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path

const userId = luffy
router.push({ name: 'user', params: { userId }}) // -> /user/luffy
router.push({ path: `/user/${userId}` }) // -> /user/luffy
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

2、router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

3、router.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

4、操作 window.history

router.push、router.replace、router.go 它们都是效仿 window.history API的，那么 ==> Browser History APIs

命名路由

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

// 给该路由起的名字叫做 user
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
// 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象
<router-link :to="{ name: 'user', params: { userId: luffy }}">User</router-link>
// 等价于
router.push({ name: 'user', params: { userId: luffy }})