vue-router的使用初体验

最新推荐文章于 2024-08-17 22:36:14 发布

爱学习的静静

最新推荐文章于 2024-08-17 22:36:14 发布

阅读量75

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_44721766/article/details/119573196

版权

vue-router Vue 路由配置懒加载页面跳转

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vue-router

使用Vue编写的页面之间的跳转，离不开vue-router。vue-router的简单演示

项目的目录结构
App.vue页面代码

<template>
  <div>
	<!-- 程序的入口-->
	<router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  }
}
</script>
<style>
</style>

views文件夹下创建list.vue
List.vue代码

<template>
    <div>
        <h1>列表页</h1>
    </div>
</template>

配置路由，在router文件夹下的index.js中配置
index.js代码

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import List from '../views/List.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 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/About.vue')
  },
  {
    path: '/list',
    name: 'List',
    // route level code-splitting
    // this generates a separate chunk (list.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: List
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router