目录
目录
一、知识点总结
（一）项目源码目录设计
（二）Vue 项目：从页面跳转和数据获取划分
1、页面跳转
Vue 项目中通过 Vue Router 来实现页面之间的跳转，它提供了路由配置、导航守卫等功能。使用 Vue Router 可以轻松实现路由的定义、注册和跳转，并且还可以在跳转的过程中传递参数和数据。
2、数据获取
Vue 项目中通过 Vue Resource、Axios、Fetch 等工具来实现数据的获取，其中 Axios 是使用最广泛的一种方式。它可以发送 HTTP 请求，并且支持 Promise API，请求成功后返回的数据可以在组件中进行处理和显示。
（三）页面跳转分为路由组件与非路由组件的跳转
1、路由组件一般放置在【pages|views】文件夹，
非路由组件一般放置在【components】文件夹中
2、路由组件一般需要在router文件夹中进行注册（使用的为组件名字），
非路由组件在使用的时候，一般都是以标签的形式使用
3、注册完路由，不管是路由组件还是非路由组件，身上都有 $route,$router属性
$route：一般获取路由信息【路径，query，params等等】$router：一般进行编程式导航进行路由跳转【push|replace】
二、使用vue-router实现路由组件的搭建
1、安装 vue-router
在 Vue 项目中使用 vue-router，需要先进行安装。可以通过 npm 在命令行界面执行以下命令进行安装：
npm install vue-router2、引入vue-router
在项目的入口文件（main.js）中引入 vue-router。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router, // 注册路由器
}).$mount('#app')3、创建路由实例( router/index.js)
在使用 vue-router 前，需要先创建一个路由实例。
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
// 声明使用插件
Vue.use(VueRouter)
// 向外默认暴露路由器对象
export default new VueRouter({
mode: 'history', // 没有#的模式
routes, // 注册所有路由
})4、静态路由配置(router/routes.js)
// 引入需要跳转的组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Register from '@/pages/Register'
import Login from '@/pages/Login'
/*
// 配置路由映射关系
*/
export default [
{
path: '/',
component: Home
},
{
path: '/search',
component: Search
},
{
path: '/register',
component: Register
},
{
path: '/login',
component: Login
}
]5、在 App.vue 中添加 <router-view> 组件
<template>
<div id="app">
<router-view/> <!-- 显示当前路由对应的组件 -->
</div></template>
<script>export default {
name: 'App'
}</script>5、路由跳转
在 Vue 项目中，可以通过 <router-link> 标签或 $router.push() 方法进行路由跳转。
使用 <router-link> 标签进行路由跳转：
<template>
<div>
<h1>Home</h1>
<router-link to="/about">跳转到 About 页面</router-link>
</div>
</template>在组件内部通过编程式导航实现页面跳转
如果需要在组件内部进行页面跳转，可以使用 push 或 replace 方法来实现：
methods: {
jumpToAbout() {
this.$router.push('/about') // 使用 push 方法跳转
// 或者使用 replace 方法跳转（不会留下浏览器历史记录）
// this.$router.replace('/about')
}
}通过前述步骤，可以在 Vue 项目中实现路由导航的功能。
三、非路由组件的使用
非路由组件通常用于实现功能性或可复用的组件。
1、全局组件
全局组件是指可以在所有 Vue 实例中使用的组件。我们可以通过 Vue.component() 方法来定义全局组件，并且可以在任意 Vue 实例中使用这个组件。
例如，在 main.js 中定义一个名为 MyComponent 的全局组件：
import Vue from 'vue'
import MyComponent from './components/MyComponent.vue'
Vue.component('my-component', MyComponent)然后在其他组件中就可以像使用原生 HTML 标签一样使用这个组件：
<template>
<div>
<my-component></my-component>
</div>
</template>2、局部组件
局部组件是指只能在其父组件内使用的组件。我们可以在父组件的 components 选项中定义局部组件，并且只有在这个父组件内部才能使用这个组件。
例如，在父组件中定义一个名为 MyChildComponent 的局部组件：
import MyChildComponent from './MyChildComponent.vue'
export default {
name: 'MyParentComponent',
components: {
MyChildComponent
}
}然后在其他组件中就可以像使用原生 HTML 标签一样使用这个组件：
<template>
<div>
<my-component></my-component>
</div>
</template>3、插槽组件
插槽组件是指可以接受父组件传递过来的模板内容，并将其插入到自身模板中的组件。我们可以在组件中定义一个或多个插槽，然后在父组件中使用这些插槽来传递模板内容。
例如，在 MySlotComponent 中定义两个插槽：
<template>
<div>
<slot name="header"></slot>
<p>This is a slot component!</p>
<slot name="footer"></slot>
</div>
</template>然后在父组件中使用这些插槽：
<template>
<my-slot-component>
<template v-slot:header>
<h1>Header</h1>
</template>
<template v-slot:footer>
<p>Footer</p>
</template>
</my-slot-component>
</template>在父组件中使用了两个插槽，分别是 header 和 footer。子组件会将这些插槽中的模板内容插入到自身模板中对应的位置。
综上所述，Vue 项目中非路由组件有如下三种使用方式：
-
全局组件：可以在所有 Vue 实例中使用；
-
局部组件：只能在其父组件内使用；
-
插槽组件：能够接受父组件传递过来的模板内容，并将其插入到自身模板中。
四、路由组件的配置
（一）、组件显示与隐藏
在 Vue Router 中，可以使用路由元信息（meta）来定义一些额外的信息，这些信息不会直接与路由匹配，但是可以在路由组件中通过 this.$route.meta 来获取到。
结合 v-show 指令，我们可以使用路由元信息来控制组件的显示和隐藏。具体实现步骤如下：
1、在路由配置中定义路由元信息
例如，在路由配置中定义一个元信息 hidden，作为组件显示或隐藏的依据：
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home,
meta: {
hidden: false
}
},
{
path: '/about',
component: About,
meta: {
hidden: true
}
}
]
})这里的 meta.hidden 表示一个 boolean 类型的值，用来控制组件的显示和隐藏。
2、在路由组件中结合 v-show 使用路由元信息
在组件中使用 v-show 指令，并结合路由元信息 meta.hidden 来控制组件的显示和隐藏：
<template>
<div v-show="!$route.meta.hidden">
<!-- 组件内容 -->
</div>
</template>在这个例子中，使用 ! 符号将 $route.meta.hidden 的值取反，这样当 hidden 值为 true 时，v-show 就变成了 v-show="false"，从而实现了隐藏组件的效果。
需要注意的是，使用路由元信息来实现组件的显示和隐藏只是一种方法，具体的实现方式需要根据需求来选择。如果需要频繁切换组件的显示状态，可以考虑使用 v-show 指令；如果显示状态不需要频繁改变，可以使用 v-if 指令来控制组件的显示和隐藏。
（二）重定向
在 Vue Router 中，可以使用重定向（Redirect）来将一个 URL 地址重定向到另一个地址。重定向的作用是访问一个路由时，自动将请求转发到另一个路由上，从而实现页面跳转的效果。
重定向的实现方式有两种：一种是通过路由配置中的 redirect 字段来实现；另一种是通过路由组件的钩子函数来实现。
1、通过路由配置实现重定向
在路由配置中，可以使用 redirect 字段来实现重定向功能。例如，下面的代码将路径 /home 重定向到 /about 路径：
const routes = [
{
path: '/home',
redirect: '/about'
},
{
path: '/about',
component: About
}
]这样，当访问 /home 路径时，会自动将请求重定向到 /about，并展示 About 组件。
2、通过路由组件钩子实现重定向
除了在路由配置中实现重定向，我们还可以通过路由组件的钩子函数来实现。具体的方法是在路由组件的钩子函数中使用 $router.push 或 $router.replace 方法来重定向到另一个路由。例如，在 Home 组件中实现重定向到 About 组件的代码如下：
export default {
mounted() {
this.$router.replace('/about')
}
}这样，当 Home 组件被渲染到页面上时，会自动调用 mounted 钩子函数，并执行 $router.replace 方法将请求重定向到 /about 路径。
需要注意的是，路由重定向可以实现页面跳转的效果，但是如果不谨慎使用，也可能会造成死循环等问题。因此，在使用重定向时一定要仔细思考，避免出现不必要的问题。
（三）路由传参
在 Vue Router 中，路由传参可以分为两种方式：params 参数和 query 参数。
1、使用 params 参数传递参数
我们可以在路由配置中使用 params 参数来传递用户 ID。具体实现方法如下：
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/user/:id',
name: 'user',
component: User
}
]
const router = new VueRouter({
routes
})
// 在 Home 组件中，实现跳转到 User 组件，并传递用户 ID 参数
<template>
<div class="home">
<ul>
<li v-for="user in users" :key="user.id">
<router-link :to="{ name: 'user', params: { id: user.id } }">{{ user.name }}</router-link>
</li>
</ul>
</div>
</template>在上述代码中，我们在路由配置中添加了一条 /user/:id 的路由记录，其中 :id 表示一个动态参数，用于传递用户 ID。在 Home 组件中，我们使用 router-link 组件将用户的名称包裹起来，点击用户名时会跳转到 User 组件，并将用户 ID 通过 params 参数传递给 User 组件。
在 User 组件中，我们可以通过 $route.params.id 来获取用户 ID。具体实现方法如下：
<template>
<div class="user">
<h2>User Detail</h2>
<p>ID: {{ $route.params.id }}</p>
</div>
</template>2、使用 query 参数传递参数
与使用 params 参数不同，如果我们使用 query 参数来传递用户 ID，那么需要在路由链接中添加一个查询参数，具体实现方法如下：
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/user',
name: 'user',
component: User
}
]
const router = new VueRouter({
routes
})
// 在 Home 组件中，实现跳转到 User 组件，并传递用户 ID 参数
<template>
<div class="home">
<ul>
<li v-for="user in users" :key="user.id">
<router-link :to="{ name: 'user', query: { id: user.id } }">{{ user.name }}</router-link>
</li>
</ul>
</div>
</template>在上述代码中，我们在路由配置中将 /user/:id 的路由记录修改为了 /user，同时在 router-link 中使用 query 参数来传递用户 ID。
在 User 组件中，我们可以通过 $route.query.id 来获取用户 ID。具体实现方法如下：
<template>
<div class="user">
<h2>User Detail</h2>
<p>ID: {{ $route.query.id }}</p>
</div>
</template>3、params 参数和 query 参数的区别
（1）参数位置不同
使用 params 参数时，参数会被添加到 URL 的路径中，如 /user/:id 中的 :id 就是一个动态参数，用于传递用户 ID。而使用 query 参数时，参数会被添加到 URL 的查询字符串中，如 /user?id=123 中的 id 就是一个查询参数，用于传递用户 ID。
（2）URL 格式不同
由于位置不同，params 参数会直接将参数添加到 URL 的路径中，因此 URL 的格式会更加友好。而 query 参数则会将参数添加到 URL 的查询字符串中，因此 URL 的格式可能会比较长和复杂。
（3）匹配方式不同
使用 params 参数时，需要在路由配置中定义动态参数，并根据实际参数进行匹配。例如，在路由配置中定义了一个 /user/:id 路径，当用户访问 /user/123 时，路由就会匹配到这条记录，并将动态参数 id 的值设置为 123。
而使用 query 参数时，可以在任何路径中添加查询参数，例如 /user?id=123、/product?id=456 等。因此，不需要在路由配置中定义查询参数，也不需要进行路由匹配。
（4）使用方式不同
使用 params 参数时，通常用于向页面传递动态参数，例如传递文章 ID、用户 ID 等。可以通过 $route.params.id 的方式从组件中获取参数值。
而使用 query 参数时，通常用于进行搜索、筛选等操作，例如搜索关键词、筛选价格区间等。可以通过 $route.query.keyword 的方式从组件中获取参数值。
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
