Vue2学习(2)--代码拆成多文件，带你理清 Vue 工程化的核心脉络
目录
（2） 内容区域控制：路由 (src/router/index.js)
（2）this.$router.push()——留痕迹的跳转
（3）this.$router.replace()——不留痕迹的跳转
（4）this.$router.go(n)——前进与后退的控制
上期的基础用法都是在一个单html文件演示的，但实际项目都是多文件的，在这里继续学习Vue的工程化。
1、怎么创建一个Vue2项目
在学习怎么编写之前，先创建一个项目的框架。
（1）、安装 Vue CLI（脚手架）：
如果你以前没装过，请在终端输入以下命令全局安装（如果已安装可跳过）：
npm install -g @vue/cli（2）、在终端中输入以下命令来创建一个新项目
vue create your_project_name可能会出现以下情况，即更换国内镜像来加速安装，选Y即可。
还会让选择Preset和和安装依赖包的工具，我选的Vue 2和NPM
（3）、进入项目并安装路由插件
cd your-project-name
npm install vue-router@3.5.2 --save这样Vue2框架就搭好了。
2、Vue2项目的入口
搭好了框架后，要学习的就是这个项目是怎样运行的，以此来明白该怎样去改框架代码，首先先找到项目入口main.js。
Vue 项目的启动入口是 src/main.js，它负责初始化 Vue 实例、挂载根组件并引入全局插件（如路由、状态管理），是整个应用运行的起点。
在标准的 Vue CLI 或 Vite 项目中，main.js 通常包含以下核心操作：
导入 Vue 框架和根组件 App.vue；
创建 Vue 实例并注入配置（如路由、Vuex）；
使用 $mount('#app') 将应用挂载到 public/index.html 中的 <div id="app"> 节点上。
例如，一个典型的 main.js 代码如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 关闭生产环境提示
Vue.config.productionTip = false
// 创建 Vue 实例并注入路由
new Vue({
router, // 将路由对象注入到根实例中
render: h => h(App)
}).$mount('#app')（1）render: h => h(App)
是 Vue.js 中用于定义组件渲染逻辑的核心语法，它等价于 render: function (createElement) { return createElement(App) }，作用是将根组件 App.vue 渲染到页面上。
（2）.$mount('#app')如何找到并确定挂载位置
查找 DOM 元素： 它在网页的 HTML 文档中进行匹配查找，相当于在后台自动执行了类似 document.querySelector('#app') 的操作。
定位容器： 它会精准找到你的 HTML 文件中带有 id="app" 的那个标签（通常是一个空的 <div id="app"></div>），并将其作为“画框”或“容器”。
（3）确定位置后Vue的做法：
渲染内容：
将你通过 render 函数生成的虚拟 DOM 转化为真实的 DOM 节点。
替换/填充：
将生成的真实页面内容直接塞入到这个 <div id="app"> 内部。
激活响应式：
在这个区域内启用数据双向绑定和事件监听，让你的页面“活”起来。
3、三个层面控制前端页面
这里以前面的main.js来举例，Vue是单页面应用，多页面的视觉效果都是通过router渲染到挂载的这一页面。这里演示的就是在路由出口渲染需要的每一页，互相之间切换。
（1） 宏观布局控制：根组件 (App.vue)
main.js 启动后，首先会把 App.vue 渲染到页面上。
<!--App.vue-->
<template>
<div id="app">
<!-- 全局导航栏 -->
<nav style="margin-bottom: 20px; padding: 10px; background-color: #f5f5f5;">
<router-link to="/" style="margin-right: 15px;">首页</router-link>
<router-link to="/list">文章列表</router-link>
</nav>
<!-- 【核心】路由出口：匹配的组件将在这里渲染 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>作用： 在这里放置所有页面都共有的部分，比如顶部的导航栏、侧边菜单、底部的版权信息。
页面切换出口： 在这个框架内部，会放一个 <router-view></router-view> 标签。，路由匹配到的具体页面就会显示在这个位置。
（2） 内容区域控制：路由 (src/router/index.js)
作用： 它相当于网站的“交通指挥中心”。当用户在浏览器地址栏输入 /login 时，路由会拦截这个请求，并告诉 Vue：“请把登录页面的组件拿出来，塞到 <router-view> 里去。”
操作： 在路由表里把它们和路径绑定起来即可。
// /router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
//@ 是一个路径别名，它默认指向项目的 src 目录,因为当前文件并不在根目录下。
import List from '@/views/List.vue'
import Detail from '@/views/Detail.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/list',
name: 'List',
component: List
},
{
path: '/detail/:id', // :id 为动态参数
name: 'Detail',
component: Detail,
props: true // 将路由参数作为 props 传递给组件
}
]
const router = new VueRouter({
mode: 'history', // 使用 history 模式（URL不带#号）
routes
})
export default router1)全局前置守卫
在routes中定义meta,在beforeEach()中使用来完成特定的预处理作用。
第一个参数 ：即将要进入的目标路由对象。它包含了你即将跳转到的页面的路径、参数以及我们在前面配置的 meta 信息。
第二个参数 ：当前导航正要离开的路由对象。代表你目前所在的页面。
第三个参数 ：一个用于控制导航流程的函数。它是整个守卫的核心，你必须调用它来决定这次跳转的命运。
document指当前加载的HTML网页文档（DOM）
localStorage是浏览器提供的一种持久化存储机制，允许在浏览器中以键值对的形式存储数据，特点是永久存在，除非手动清除。
sessionStorage和localStorage用法差不多，但是临时存储，用户关闭浏览器标签页数据自动清空。
// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import List from '@/views/List.vue'
import Detail from '@/views/Detail.vue'
import Login from '@/views/Login.vue' // 假设你有一个登录页
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { title: '首页', requiresAuth: false } // 公开页面，无需登录
},
{
path: '/list',
name: 'List',
component: List,
meta: { title: '游戏列表', requiresAuth: true } // 👈 需要登录才能访问
},
{
path: '/detail/:id',
name: 'Detail',
component: Detail,
props: true,
meta: { title: '下载游戏', requiresAuth: true } // 👈 需要登录才能访问
},
{
path: '/login',
name: 'Login',
component: Login,
meta: { title: '用户登录', requiresAuth: false } // 登录页本身不需要拦截
}
]
const router = new VueRouter({
mode: 'history',
routes
})
// ==========================================
// 👇 全局前置守卫核心逻辑
// ==========================================
router.beforeEach((to, from, next) => {
// 1. 动态修改浏览器标签名
document.title = to.meta.title || '绿树电竞';
// 2. 检查目标路由是否需要登录验证
if (to.meta.requiresAuth) {
// 模拟获取本地存储的用户 Token（实际项目中可能是 Vuex/Pinia）
const token = localStorage.getItem('token');
if (!token) {
// 3. 如果没有 Token，说明未登录：
// 中断当前导航，并重定向到登录页
// 同时把用户原本想去的地址(to.fullPath)带上，方便登录后跳回来
next({
path: '/login',
query: { redirect: to.fullPath }
});
return; // ⚠️ 注意：重定向后一定要 return，防止继续往下执行
} else {
// 4. 如果有 Token，说明已登录：直接放行
next();
}
} else {
// 5. 如果该路由不需要鉴权，直接放行
next();
}
});
export default router;（3）微观细节控制：具体的 .vue 文件 (组件)
每一个 .vue 文件通常包含三部分：
<template> (模板结构)： 控制页面长什么样。这里写的是 HTML 结构，但它支持动态语法（比如 v-if 控制元素显隐，v-for 循环生成列表）。
<script> (逻辑与数据)： 控制页面的行为。在 data 里定义变量，在 methods 里写点击事件。只要修改了 data 里的数据，页面上的对应内容会自动更新。
<style> (样式)： 控制页面的美化程度，并且通常是局部生效的，不会污染其他页面。
（4）同时渲染多个页面
上一部分每次都只能渲染一个页面，这里讲一下同时渲染多个页面，需要为<router-view>添加name属性
1）在模板中放多个带名字的视图
<template>
<!-- 顶部导航区域 -->
<header>
<router-view name="header"></router-view>
</header>
<!-- 左侧边栏区域 -->
<aside>
<router-view name="sidebar"></router-view>
</aside>
<!-- 主内容区域（没有写 name，默认为 default） -->
<main>
<router-view></router-view>
</main>
</template>2）在路由配置中使用复数的 components
const routes = [
{
path: '/',
components: {
default: Home, // 填充到默认的 <router-view>
header: HeaderComponent, // 填充到 name="header" 的视图
sidebar: SidebarComponent // 填充到 name="sidebar" 的视图
}
}
]4、通过路由实现页面跳转
因为前面在讲Vue的时候都讲的单页面的用法，这里多文件有了更多的场景，比如页面跳转
（1）<router-link> 就是 Vue 官方提供的一个“智能超链接”组件
作用：
在浏览器渲染后，它本质上就是一个普通的 <a> 标签。
当你点击普通的 <a> 标签时，浏览器会向服务器重新请求整个页面（也就是常说的页面刷新）。而点击 <router-link> 时，Vue 会在后台进行无刷新跳转——只替换页面中需要变化的内容区域，保留其他部分（比如顶部的导航栏、侧边栏），让用户体验非常丝滑。
用 <router-link> 配合 :to 对象，是 Vue 项目中实现带参数页面跳转标准的写法。
<router-link :to="{ name: 'Detail', params: { id: item.id } }">
{{ item.title }}
</router-link>
<!--
:to="..."：这是 <router-link> 唯一必须设置的属性，相当于普通 <a> 标签里的 href 属性。注意前面有个冒号 :，代表这里绑定的是一个 JavaScript 对象，而不是纯文本字符串。
name: 'Detail'：告诉路由系统：“我要去的地方叫 Detail”。这对应在 router/index.js 里配置的路由名称。推荐使用 name 而不是直接写路径（如 /detail/123），因为如果以后路径改了，只需要改一处配置，不用到处找代码修改。
params: { id: item.id }：这是用来传递参数的。它会把当前循环到的文章 ID 塞进 URL 里。比如当前 item.id 是 1，那么最终生成的 URL 就会变成 /detail/1。
{{ item.title }}：这是包裹在 <router-link> 标签中间的文本，也就是用户在页面上看到的可点击的文字。
-->（2）this.$router.push()——留痕迹的跳转
接下来三种方法都是编程式导航，都需要用到methods,例如：
<!--1、写在 <script> 的 methods 中
-->
<button @click="goToDetail(item.id)">点击跳转</button>
<script>
export default {
data() {
return {
//留空
}
},
methods: {
goToDetail(id) {
// 编程式跳转方法
this.$router.push({
name: 'Detail',
params: { id }
})
}
}
}
</script>
<!--
2、直接写在 <template> 标签上
-->
<button @click="$router.push({
name: 'Detail',
params: { id: item.id }
})">点击跳转</button>和replace区别：
它的用法和 replace（） 几乎一模一样，但核心区别在于浏览器的历史记录：
push：会向历史记录栈里添加一条新记录。用户点击浏览器后退按钮时，能回到上一个页面。 replace：会直接替换当前的历史记录。用户点击浏览器后退按钮时，会跳过当前页面，回到“上上个”页面。
（3）this.$router.replace()——不留痕迹的跳转
示例：
// 登录成功后，替换当前页面
this.$router.replace({ name: 'Home' })适用场景：
最典型的就是登录成功后跳转到首页。因为一旦登录成功，我们通常不希望用户再点“后退”又退回到登录页，这时候用 replace就可以满足。
（4）this.$router.go(n)——前进与后退的控制
作用：
这个方法专门用来控制浏览器历史记录的向前或向后移动，参数 n 是一个整数
this.$router.go(-1)：后退一步（等同于点击浏览器的“后退”按钮）。
this.$router.go(1)：前进一步（等同于点击浏览器的“前进”按钮）。
this.$router.back()：Vue 提供的快捷方法，效果等同于 go(-1)。
示例：
<button @click="$router.go(-1)">返回上一页</button>（5）在<router-view>中展示
路由渲染的Vue页面会在main.js中挂载的Vue文件中的<router-view>挂载。
5、export default{}：配置对象复用化
其他文件想要引用该Vue文件，该文件需要在export default{}中进行配置
作用：
它是一个配置对象：
export default { ... } 导出的并不是一个真实的 Vue 实例，而是一个包含了 data、methods、生命周期钩子等配置的普通 JavaScript 对象。
模块化复用：
其他文件需要用到这个组件时，只需要通过 import List from './List.vue' 就能使用，内部data写成一个函数数可以确保每次创建新实例时，都返回一份全新的独立数据
优点：
导入时命名自由，避免冲突，符合“单一职责”原则
export default 的核心限制是每个文件只能有一个默认导出。这在架构设计上倒逼开发者遵循“一个文件只定义一个组件”的最佳实践。这种清晰的模块化结构使得项目目录一目了然，极大提升了大型项目的可维护性。
因为一个模块只能有一个默认导出，所以在其他文件中导入时，你可以给它起任何你喜欢的名字，而不需要强制匹配原名称。
更多推荐
8
0- 0
已为社区贡献4条内容
所有评论(0)