当前位置：首页 > wzjs >正文

自助建个人网站哪个好昆明商城小程序开发

wzjs 2025/9/18 14:39:04

自助建个人网站哪个好,昆明商城小程序开发,国办网站建设指引,哪家做网站的好欢迎来到编程星辰海的博客讲解看完可以给一个免费的三连吗，谢谢大佬！ 目录一、知识讲解 1. Vue Router 核心概念 2. 动态路由参数原理 3. 参数传递方案对比二、核心代码示例 1. 完整路由配置 2. 参数接收组件 3. 导航操作示例三、实现效果示…

=====欢迎来到编程星辰海的博客讲解======

看完可以给一个免费的三连吗，谢谢大佬！

一、知识讲解

1. Vue Router 核心概念

2. 动态路由参数原理

3. 参数传递方案对比

二、核心代码示例

1. 完整路由配置

2. 参数接收组件

3. 导航操作示例

三、实现效果示意图

四、学习要点总结

五、扩展阅读推荐

官方文档

深度文章

推荐工具

一、知识讲解

1. Vue Router 核心概念

Vue Router 是 Vue.js 的官方路由管理器，主要功能包括：

嵌套路由映射
动态路由参数
模块化的路由配置
导航控制
自动激活的 CSS 类链接

路由工作原理：

TEXT

URL变化 → 路由匹配 → 渲染组件 → 更新视图

2. 动态路由参数原理

动态路由通过冒号 : 定义参数占位符，实现根据URL变化渲染相同组件不同内容。其核心特性包括：

参数识别：/user/:id 匹配 /user/123
响应式更新：参数变化自动触发组件更新
多参数支持：/posts/:category/:id
正则约束：path: '/user/:id(\\d+)'（仅数字）

生命周期触发顺序：

TEXT

beforeRouteUpdate → beforeUpdate → updated

3. 参数传递方案对比

方式	适用场景	可见性	参数类型
动态路由参数	资源标识类参数	显示在URL	字符串
Query参数	筛选条件类参数	显示在URL	字符串
Props传参	父子组件通信	不可见	任意类型
Vuex状态管理	全局共享数据	不可见	任意类型

二、核心代码示例

1. 完整路由配置

JAVASCRIPT

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/user/:userId',name: 'UserProfile',component: () => import('../views/UserProfile.vue'),props: true // 将路由参数作为props传递},{path: '/posts/:category/:postId',component: () => import('../views/PostDetail.vue'),beforeEnter: (to, from) => {// 路由独享守卫if (!validateCategory(to.params.category)) {return { name: 'NotFound' }}}}
]const router = createRouter({history: createWebHistory(),routes
})function validateCategory(cat) {const allowed = ['tech', 'life', 'news']return allowed.includes(cat)
}export default router

2. 参数接收组件

VUE

<!-- UserProfile.vue -->
<template><div class="user-container"><h2>用户ID：{{ userId }}</h2><p>用户名：{{ userInfo.name }}</p><!-- 带参数的导航 --><router-link :to="{ name: 'UserProfile', params: { userId: 456 } }"class="nav-link">查看用户456</router-link></div>
</template><script>
export default {props: ['userId'], // 通过props接收参数data() {return {userInfo: {}}},// 选项式API写法watch: {userId: {immediate: true,handler(newVal) {this.loadUserData(newVal)}}},// 组合式API写法// setup(props) {//   watch(() => props.userId, (newVal) => {//     loadUserData(newVal)//   }, { immediate: true })// },methods: {async loadUserData(id) {try {const response = await fetch(`/api/users/${id}`)this.userInfo = await response.json()} catch (error) {console.error('数据加载失败:', error)this.$router.push('/error?type=user_load')}}},// 路由守卫（新旧路由参数变化时触发）beforeRouteUpdate(to, from) {if (to.params.userId !== from.params.userId) {this.loadUserData(to.params.userId)}}
}
</script>

3. 导航操作示例

VUE

<!-- App.vue -->
<template><nav><!-- 声明式导航 --><router-link :to="{ name: 'UserProfile', params: { userId: 123 } }"class="nav-item">我的账号</router-link><!-- 编程式导航 --><button @click="viewPost('tech', 789)">查看技术文章</button></nav><router-view class="main-content"/>
</template><script>
export default {methods: {viewPost(category, postId) {this.$router.push({path: `/posts/${category}/${postId}`})// 或使用命名路由// this.$router.push({//   name: 'PostDetail',//   params: { category, postId }// })}}
}
</script>

三、实现效果示意图

（示意图说明：展示路由切换时URL变化、参数更新和组件内容动态加载效果）

四、学习要点总结

参数定义：
- 使用冒号语法 :paramName
- 支持多级参数 /a/:b/c/:d
- 正则约束 /user/:id(\\d+)

参数获取：

JAVASCRIPT

// 选项式API
this.$route.params.userId// 组合式API
import { useRoute } from 'vue-router'
const route = useRoute()
route.params.userId

响应式更新：
- 使用 watch 监听参数变化
- 使用 beforeRouteUpdate 导航守卫
- 使用 onBeforeRouteUpdate 组合式API钩子

最佳实践：

JAVASCRIPT

// 良好的参数校验
{path: '/product/:id',component: ProductPage,beforeEnter: (to) => {if (!isValidProductId(to.params.id)) {return { path: '/invalid-product' }}}
}// 数据预加载模式
async beforeRouteEnter(to, from, next) {const data = await fetchInitialData(to.params.id)next(vm => vm.setData(data))
}