大前端学习 -- 手写 Vue Router

最新推荐文章于 2023-03-29 10:15:57 发布

爱玲姐姐

最新推荐文章于 2023-03-29 10:15:57 发布

阅读量1.1k

点赞数 1

分类专栏：大前端 Vue 文章标签：手写VueRouter

本文链接：https://blog.youkuaiyun.com/jal517486222/article/details/107444444

版权

本文介绍了手写Vue Router的全过程，包括动态路由、嵌套路由、编程式导航、Hash模式与History模式的区别及实现，提供了代码仓库链接，并详细解释了History模式在服务器配置上的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手写 Vue Router

Vue-Router

代码仓库地址：
https://gitee.com/jiailing/lagou-fed/tree/master/fed-e-task-03-01/code/06-my-vue-router

vue-router核心代码:

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/ablout">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

router/index.js

// 注册插件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
   
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
   
  routes
})

export default router

main.js

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

Vue.config.productionTip = false

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

一、动态路由

router/index.js

const routes = [
  {
   
    path: '/',
    name: 'Index',
    component: Index
  },
  {
   
    path: '/detail/:id',
    name: 'Detail',
    // 开启props，会把URL中的参数传递给组件
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Detail.vue')
  }
]

view/Detail.vue

<template>
  <div>
    这是Detail页面
    <!-- 方式一：通过当前路由规则，获取数据 -

最低0.47元/天解锁文章