1.Vue Router基础使用

Vue路由博客

1.什么是路由

路由的本质就是一种对应关系（此处的路由含义同之前nodejs的路由），根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。
管理组件跳转
路由核心: 改变URL，但是页面不进行整体刷新

2.分类

路由分为：后端路由和前端路由

后端路由：

由服务器端进行实现并实现资源映射分发（nodejs、jsp、php等）

• 概念：根据不同的用户URL请求，返回不同的内容（地址与资源产生对应关系）
• 本质：URL请求地址与服务器资源之间的对应关系（映射）

前端路由：

根据不同的事件来显示不同的页面内容，是事件与事件处理函数之间的对应关系

• 概念：根据不同的用户事件，显示不同的页面内容（地址与事件产生对应关系）
• 本质：用户事件与事件处理函数之间的对应关系

3.路由表routes

指多条路由的集合

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/:path(.*)', component: NoteFound }
]

4.安装Router

//在项目路径下输入
npm install vue-router@4

5.基本使用

1)在.js文件中定路由

在src中创建router文件夹，并在其中创建index.js文件，存放路由的配置。
在index.js文件中定义路由、创建路由实例

//导入Router方法的包
import {createRouter,createWebHashHistory  } from "vue-router";
// 1. 定义路由组件.
// 也可以从其他文件导入,这里使用导入法导入组件
import Home from '../views/Home.vue'
import About from '../views/about.vue'


// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// routes像是一个数组，一个格子是一对路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例router并传递 `routes` 配置
// 你可以在这里将更多的配置封装到router中，但我们在这里保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

//router对象导出，让main.js能挂载到
export default router

2）在vue文件中使用路由

<template>
<div>
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
</template>

注：
我们没有使用常规的 a 标签，而是使用一个自定义组件< router-link >来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

<router-view >将显示与 url 对应的组件。相当于一个占位符你可以把它放在任何地方，以适应你的布局。