6.1 安装、配置Router – 老虫儿的笔记本

前置知识
- Vue Router是Vue.js官方的路由管理器。它使得构建单页面应用变得容易许多。
- 单页应用(SPA，single page application)
  - 单一页面应用程序，只有一个完整的页面
  - 它在加载页面时，不会加载整个页面，而是只更新某个指定容器中内容
  - 单页面应用的核心之一是：更新视图而不重新请求页面
- 路由
  - 这里的路由指的是SPA的路径管理器
  - Vue的单页面应用将路径和组件映射起来，路由用于设定访问路径，由路径之间的切换，实现组件的切换
  - 路由模块的本质就是建立起url和页面之间的映射关系

安装、配置vue-router

安装路由
- ```
npm install vue-router
```
- 我在用脚手架搭建vue工程的时候已经选过了，所以运行该命令会更新版本

配置路由

在main.js中进行如下路由配置

// 0. 导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
import Foo from "./views/Foo.vue";
import Bar from "./views/Bar.vue";

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

实际上就是四步
1. 导入vur和vue-router
2. 定义路由组件
3. 定义路由，其中每个路由应该映射一个组件
4. 创建router实例，然后传‘routers’配置（并不一定时routers）
5. 创建和挂在根实例

路由的使用
- 首先，在App.vue中我们使用<router-link>组件来导航：
  - ```
  <template>
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        
        
        
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      
      
      
      <router-view></router-view>
    </div>
  </template>
```
- 显示效果
  - 导航标签<router-link> <router-link> 标签有一个 to 属性，这个属性指定路径（链接），根据我们配置的路由，路径 /foo 对应的组件是 Foo.vue 组件。
  - “插槽”标签 <router-view> <router-view> 标签相当于一个插槽，它所在的位置将渲染路由匹配到的组件。
  - 比如，我们点击 “Go to Foo” 这个导航的时候，<router-view></router-view> 处将展示 Foo.vue 组件。
  - <router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。默认渲染成带有正确链接的 <a> 标签。
    
    注意：Foo.vue 和 Bar.vue 文件在 src/views 文件夹里哦。
    
    注意，我们可以把 router 的配置从 main.js 中抽出来，放到了src/router/index.js 中，当 router 的配置内容过多时，这么做是非常合理的。

发表评论 取消回复

发表评论取消回复