〖Vue〗必备小知识-前端路由切换页面--vue-router

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

今天来学习 Vue 项目小实战之页面切换: 路由 Vue-Router

Vue-Router 前端路由

前端路由 就是 根据不同的 hash值，切换不同的组件, 也就是显示不同的页面内容

<第一步 安装路由>

cnpm i vue-router --save

<第二步 在 main.js 中引入>

import VueRouter from ‘vue-router’

<第三步 使用>

Vue.use(VueRouter)

<第四步 实例化>

var router = new VueRouter()

<第五步 根实例中注册> router

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router' // 在项目中引入路由

Vue.use(VueRouter)

var router = new VueRouter()

new Vue({
  el: '#app',
  router, // 注册 路由router
})

<第六步 App 里写上>

看到下面代码应该就有页面了吧! 嘿嘿, 请自行脑补:

<router-link to="”路径”" /> <router-view />

// app.vue

<template>
  <div id="app">
    <my-component></my-component>

    <router-link :to="/pageone">这是第一一个页面<router-link>
    <router-link :to="/pagetwo">这是第二一个页面<router-link>
    <router-link :to="/pagethree">这是第三一个页面<router-link>

    <router-view/> <!-- 进行路由切换的组件的容器 -->
  </div>
</template>

分离路由模块

进行搬家, 分离 路由模块到 router 文件夹, 创建 index.js,

当然还可以路由 routes 单独分离出来: /src/router/routes.js 和 index.js

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router' // 在项目中引入路由
import PageOne from '@/components/PageOne' // 在项目中引入对应页面组件
import PageTwo from '@/components/PageTwo' // 在项目中引入对应页面组件
import PageThree from '@/components/PageThree' // 在项目中引入对应页面组件

Vue.use(VueRouter)

var router = new VueRouter({
  routes: [
    {
      path: 'pageone',
      component: PageOne,
    },
    {
      path: 'pageone',
      component: PageTwo,
    },
    {
      path: 'pageone',
      component: PageThree,
    },
  ],
})

export default router

在 main.js 中引入/注册即可.

小结

安装 引入 注册 使用

cnpm i vue-router --save

路由的原理 :

• 路由的原理: 根据 hash 值得变化来切换组件

  • localtion.hash 获取哈希值
  • hashchange 切换组件

• 路由默认的 hash 模式

  • history 模式