3-1-vue框架-官方路由-vue router

介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
官方文档：https://router.vuejs.org/zh/guide/

下载

npm install vue-router@4

yarn add vue-router@4

入门

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

案例

第一步：先启动一个vue3的项目，然后index.html不要动

第二步：把main.js改成这个样子

// import './assets/main.css'

import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'

// createApp(App).mount('#app')


// 1. 定义路由组件.
// 也可以从其他文件导入
const Home =  { render(){ return 'Home'} }
const About =  { render(){ return 'About'} }

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

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

// 5. 创建并挂载根实例
// 创建一个vue应用，将App组件和定义的路由放入到vue应用，并挂载到模板页面id为app的元素上。
const app = createApp(App)
app.use(router)
app.mount('#app')

// 现在，应用已经启动了！

第三步：App.vue改成这样

<template>
  <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>
</template>
<script>
export default {

}
</script>

• 注意：是用来展示路由对应的组件UI的。

router-link的使用

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

router-link属性值详解

:to 属性值

这个属性值就相当于a标签中的"herf"属性，后面的内容为跳转链接的内容

<router-link :to="http://www.baidu.com/">百度</router-link>

相当于

<a href="http://www.baidu.com/">百度</a>

vue中有多少种跳转，js也可以单独实现点击方法来跳转，这个也要会，

        <template slot-scope="{row}">
          <a :href="'http://127.0.0.1:5000'+row.testReportUrl" target="_blank">{{ 'http://127.0.0.1:5000'+row.testReportUrl }}</a>

        </template>

router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

动态路由

带参数的动态路由匹配

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：

const User = {
  template: '<div>User</div>',
}

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

你可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。例如：

匹配模式 匹配路径 $route.params
/users/:username /users/eduardo { username: 'eduardo' }
/users/:username/posts/:postId /users/eduardo/posts/123 { username: 'eduardo', postId: '123' }
除了 $route.params 之外，$route 对象还公开了其他有用的信息，如 $route.query（如果 URL 中存在参数）、$route.hash 等。

2. vue router携带query参数

      <el-table-column label="报告地址" min-width="150px">
        <template slot-scope="{row}">
          <router-link :to="{
        path: '/report/webReportList',
        query: {
                id: row.id
        }
}">报告详情</router-link>
        </template>
      </el-table-column>

• 主要to前面要有冒号

vue 返回上一页有两种方法：

如果使用的是 vue-router ，this.$router.go(-1) 就可以回到上一页。
history.go(-1) 是回到浏览器上一页。

// 跳转到一个新页面
this.$router.push('/about')
// 返回到之前的页面
this.$router.back()

// 后退一次
this.$router.go(-1)
// 前进一次
this.$router.go(1)