vue路由router的基本使用

vue路由router

路由基本介绍

路由：

路由是一个js功能模块，用于解决SPA项目组件切换显示问题的，本身对组件切换的各个底层技术有做封装，是更成熟组件切换解决方案，使用起来更高级、方便。路由是开发SPA项目的必备技能。

路由封装的元素有：

• #锚点超链接
• component 占位符标签
• window.onhashchange
• window.location.hash

路由实现：

路由安装

在项目中安装路由有两种方式(两种方式本质完全一样)：

1. vuecli（脚手架）创建项目的时候(勾选Router项目即可，这时会增加一个步骤，选择n即可)。
2. 单独安装：

npm i vue-router

注意：

• 安装依赖包的指令需要在项目根目录执行。
• 依赖包：通过npm i 安装的东西是依赖包(功能包)，每个依赖包内部有多个功能模块。
  • 模块：一个js文件内部有做"模块化导出"动作，这个js文件就是一个(功能)模块 。
  • 例如：npm install 依赖包/功能包

路由应用

路由配置

在src/main.js中给路由做如下配置：

1. import 引入路由模块。
2. import 引入各个业务组件。
3. Vue.use(路由模块) 注册路由组件。
4. 创建路由对象，通过path、component 设置#锚点 与 组件的联系。
5. 在Vue实例内部挂载 router 路由对象。

具体代码：

import Vue from 'vue'
import App from './App.vue'

// 1. 引入路由模块
import VueRouter from 'vue-router'

// 2. 导入各个业务组件
import Home from './components/Home.vue'
import Movie from './components/Movie.vue'

// 3. 注册路由中的相关组件
//    路由中有两个组件( <router-link>  <router-view> )被进场使用
// A. 单独注册
// Vue.component('router-link',XXX)
// Vue.component('router-view',XXX)
// B. 一并注册，一次性把所有的组件都注册好，更高效
Vue.use(VueRouter) // 插件

// 4. 创建一个路由对象
const router = new VueRouter({
  // #锚点信息就是路由地址(路由地址不用设置#号，内部已经封装好了)
  // routes:固定名称，用于设置路由地址(#/xxx)与组件的对应关系
  routes:[
    // path和component都是固定名称
    // {path:路由地址, component:被显示的组件模块}
    {path:'/home', component:Home},
    {path:'/movie', component:Movie},
  ]
})

Vue.config.productionTip = false

new Vue({
  // 5. 挂载路由对象
  //    对created、window.onhashchange、window.location.hash、if else if等的封装
  router, // 全写：router:router
  render: h => h(App)
}).$mount('#app')

设置按钮和占位符

在App.vue中设置按钮 和 占位符。

通过router-link设置按钮和#锚点信息：

<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>

通过 router-view 设置组件显示占位符：

<router-view></router-view>

App.vue具体代码：

<template>
    <div>
      <h2>App根组件-路由实现spa</h2>
      <p>
        <!-- 切换按钮设置-通过路由组件实现 -->
        <!-- <a href="#/home">首页</a> -->
        <!-- <router-link to="设置当前按钮连接到锚点信息">首页</router-link> -->
        <!-- router-link组件默认会生成超链接a标签 -->
        <router-link to="/home">首页</router-link>
        <router-link to="/movie">电影</router-link>
      </p>
      <p id="cont">
        <!-- 设置业务组件显示-路由组件实现代表占位符 -->
        <router-view></router-view>
      </p>
    </div>
</template>

执行过程分析

路由执行过程：

• 用户点击页面的路由链接router-link，点击的一瞬间，就会修改浏览器地址栏中的号锚点地址信息。
• #锚点变化了会立即被 路由监听到 (路由有封装window.onhashchange事件)。
• 之后路由会获取变化后的#锚点信息 (路由有封装window.location.hash)。
• 再之后路由根据#锚点信息找到对应的组件 (在main.js中可知)。
• 最后组件是通过路由占位符router-view显示的。