目录
目录
一、知识点总结
（一）项目源码目录设计
（二）Vue 项目：从页面跳转和数据获取划分
（三）页面跳转分为路由组件与非路由组件的跳转
二、使用vue-router实现路由组件的搭建
1、安装 vue-router
2、引入vue-router
3、创建路由实例( router/index.js)
4、静态路由配置(router/routes.js)
5、在 App.vue 中添加 组件
5、路由跳转
三、非路由组件的使用
非路由组件通常用于实现功能性或可复用的组件。
1、全局组件
2、局部组件
3、插槽组件
一、知识点总结
（一）项目源码目录设计
（二）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 的方式从组件中获取参数值。
