Vue笔记3 vue-cli单页面应用与路由设置

最新推荐文章于 2025-08-13 20:03:55 发布

anran_886

最新推荐文章于 2025-08-13 20:03:55 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习笔记文章标签： vue vue-router

本文链接：https://blog.csdn.net/anran_886/article/details/77978767

本文记录了使用Vue CLI创建单页面应用的过程，包括如何安装webpack和vue-cli，搭建项目。接着详细介绍了如何配置路由，包括在components中创建组件，在router的index.js中设置路由，并在main.js中进行配置。同时，讲解了动态路由的实现，通过在router-link中设置动态路径，以及如何通过获取id来使用动态路由。最后，文章提到了嵌套路由的使用，例如/User/userName的结构。

1.准备，安装webpack和vue-cli，根据官网教程构建项目。搭建好的项目如下：
vue-cli搭建的单页面应用

2.配置路由
1). 在components中创建Page.vue，在router中的index.js中配置路由。

import Vue from 'vue'
//1.导入路由组件vue-router
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Page from '@/components/Page'
//2.调用vue-router
Vue.use(Router)
//3.创建vue-router实例
cons