vue的router配置(1)

大帅子
113 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

大家好,我是大帅子,今天给大家讲一下vue中的路由,下面我们直接开始吧

1.原理

主要就是监听网页的hash值 ,这里我写一个简单地原理

<body>
  <a href="#/a">A页面</a>
  <a href="#/b">B页面</a>
  <a href="#/c">C页面</a>

  <div class="box">我是页面A</div>

  <script>
    window.onhashchange = () => {
      // console.log(location.hash);
      if (location.hash == '#/a') {
        document.querySelector('.box').innerHTML = '我是页面A'
      } else if (location.hash == '#/b') {
        document.querySelector('.box').innerHTML = '我是页面B'
      } else {
        document.querySelector('.box').innerHTML = '我是页面c'
      }
    }
    
  </script>
</body>

2.作用

SPA单页面应用

多页面应用: 一个页面对应一个html文件

image.png

单页面应用: 一个html对应多个页面

image.png

单页面跟多页面的区别

image.png

我们可以举一个梨子 : 大多数的商城网页都不会用单页面 ,例如京东,是不是,因为他们要手机用户的页面跳转,然后给我们推荐,这个就是单页面应用的最主要的一个缺点 ,不利于seo优化(搜索引擎的优化)

vue路由从零到一

这个问题vue的官网有详细的解释,我们可以按照步骤一步步来操作一下

首先我们可以安装一个不带路由的脚手架,vue的官网其实写漏了一个很关键的一步,就是导包,我这边补充一下

1. 先下包

yarn 跟 npm都可以 我这边都写上

npm install vue-router@4
|      |      |      |
yarn add vue-router

2. 导入挂载

import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.定义组件

我这边就把两种方式都写上了,做一个最细致的男人

// 1. 定义路由组件.

(1)
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. 也可以从其他文件导入
(2)
import Home from './home.vue'
import About from './about.vue'

4.定义路由

const routes = [
    {
        path:'/home',
        name:home,  //name可以省略
        component:Home
    },
    {
        path:'/about',
        name:about,  //name可以省略
        component:()=>{import About from './about.vue'}  //懒加载
    }
]

5. 创建并挂载实例

const router = new VueRouter({
      routes     //这里是  routes:routes 的缩写
})

6.挂载

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

7.在页面上直接写跳转标签

<router-link to="/home">主页</router-link>

8. 在页面上面写路由出口

 <router-view></router-view>

这就是vue路由的几步完整配置

最后我们可以直接吧全部的提取到router/index.js ,然后模块化导出,main.js里面导入,然后挂载到实例上面,就大功告成了

附图一张

image.png

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!
avatar
文章
阅读
粉丝