Vue 路由：Vue Router

Vue Router  介绍

---

Vue Router 是 Vue.js (opens new window) 官方的路由管理器。 核心深度集成，包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制

其实就是将组件和页面做个整合，即哪个组件跳转到哪个页面。

路由就是根据一个请求路径选中一个组件进行渲染的决策过程。VueRouter路由是Vue官方推出的路由管理器。

• route：表示单个路由。
• routes：表示多个路由的集合，是一个数组，在这个数组中包含了多个route。

//定义路由规则
const routes = [
    {
        path: "/helloworld", //路由的路径
        name: "HelloWorld", //路由名称，会显示到侧边栏
        component: HelloWorld //引入视图组件，其实就是引入vue文件
    },
    {
        path: "/test",
        name: "Test",
        //导入视图组件的方式二，当路由被访问的时候，才会加载组件
        component: () => import('@/components/Test.vue')
    }
]

router：译为路由器，是route、routes的管理者。

路由的查找过程是： router -> routes -> route（当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由）

VueRouter的组成

• VueRouter类：路由器类，维护的一种路由表，根据路由请求在路由视图中动态渲染选中的组件。
• router-link：路由的链接组件，类似于<a>标签。声明用以提交路由请求的用户接口。
• router-view：路由视图组件，路由出口，负责动态渲染路由选中的组件。

例如，创建路由器：

Const router = createRouter({
    //2.指定Hash模式或History模式的页面路由
    history: createWebHashHistory()，
    //3.创建路由集合
    routes: [
    //4.一个个的route
    // .......
    ],
})

Vue Router 使用

---

npm install vue-router（前提：先创建并配置vue项目）

封装vue-router实例

创建src/router/index.js文件及目录，之后前端的路由都将维护在此文件中（自己去封装vue-router，它也是一个可以封装的实例）

不同的组件其实都绑定了视图，route-view一定会出现在App.vue里面，它其实是路由占位符，页面的入口是App.vue，它的入口一定是主视图。

当你进入到某个路径的时候，这个路径会有一个对应的页面，它会将页面文件渲染到路由占位符当中，其实也就是将整个页面渲染到路由占位符当中。这就是前面说的将子组件渲染到App.vue的另外一种方式，用路由的方式。

先去定义好路由，定义好路由然后在App.vue里面添加路由占位符

定义，创建路由的两种方式：

（1）第一种是已经引入了，不管有没有访问到这个页面都会加载这个组件，一般主页面组件会使用。

（2）第二种是进入目录的时候才会加载组件（这种侧边栏使用的多一些）

1. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter) | app.use(router)
2. 定义（路由）组件，可以从其他文件 import 进来
3. 定义路由，每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象。 

创建路由文件

• 定义路由表：routes，在路由表中包含多个route
• 创建路由器：router，在路由器中指定路由表(routes)以及路由模式(hash/history)

import {createRouter, createWebHistory} from "vue-router"

//导入组件的方式1，先导入，下面引用
import HelloWorld from '@/components/HelloWorld.vue'

//定义路由规则
const routes = [
    {
        path: "/helloworld", //路由的路径
        name: "HelloWorld", //路由名称，会显示到侧边栏
        component: HelloWorld //引入视图组件，其实就是引入vue文件
    },
    {
        path: "/test",
        name: "Test",
        //导入视图组件的方式二，当路由被访问的时候，才会加载组件
        component: () => import('@/components/Test.vue')
    }
]

//2.创建路由实例并传递上面路由对象routes
    const router = createRouter({
//路由的一种前端展现方式，通常使用这个就行了
        history: createWebHistory(),
        routes
  }
)

//暴露出去
export default router

去main.js里面去导入路由，main.js代码段：

import { createApp } from 'vue'
import App from './App.vue'
import Test from '@/components/Test.vue'

import router from '@/router'

const app =createApp(App)

//使用vue路由
app.use(router)

app.component('Test',Test)
app.mount('#app')

去App.vue里面添加路由占位符，路由匹配到的组件将渲染在这里 。

• 路由视图组件(router-view）为路由器（$router）提供了所选中组件的渲染出口。

<template>
  <router-view></router-view>
</template>

 主页面是空白的，因为是没有定义这个路由，其次app.vue里面没有任何东西了。

上面其实就是路由和VUE文件去做了匹配。 

route-link就像超链接一样

<template>
<!-- 使用router-link组件来导航 -->
<!-- 通过传入 to 属性制定链接 -->
<!-- router-link 默认会被渲染成一个a标签 -->

  <router-link to="/test">Test</router-link>
  <br>
  <router-link to="/helloworld">HelloWord</router-link>
  <router-view></router-view>

</template>

 补充：

声明路由请求接口

路由链接组件(router-link)为用户提供了提交路由请求的交互接口。使用to属性来声明链接组件的目标路径,当用户点击链接组件时，组件向路由器提交向目标路径的路由请求。

在模板中，使用<router-link>标签声明路由链接元素。

例如，下面的示例声明了一个目标路径为/about的路由链接:
        <router-link to=“/about”>ABOUT</router-link>

        注意：上例中的“/about”必须在路由表中出现。

声明路由出口

路由视图组件(router-view）为路由器（$router）提供了所选中组件的渲染出口。
在模板中，使用标签<router-view>声明路由视图元素。
例如，下面示例在模板中声明了一个路由视图:
        <router-view></router-view>

  components目录下的Home.vue组件代码段：

<template>
  <h2>我是home组件</h2>
</template>
 
<script>
export default {
  name: "Home"
}
</script>
 
<style scoped>
 
</style>

components目录下的About.vue组件代码段：

<template>
  <h2>我是About组件</h2>
</template>
 
<script>
export default {
  name: "About"
}
</script>
 
<style scoped>
 
</style> 

routers目录下的router.js文件：

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";
//引入两个组件
import Home from "../components/Home.vue";
import About from "../components/About.vue";
const rs = [   //定义路由表
    {
        path:'/home',
        component: Home,
        name: 'home'
    },
    {
        path:'/about',
        component: About,
        name: 'about'
    }
   
]
 
//定义路由器
const router = createRouter({
    routes:rs,
    history: createWebHistory()
})
 
//导出路由器
export default router 

 main.js代码段：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './routers/router'
 
const app=createApp(App)
 
app.use(router)
 
app.mount('#app')

 App.vue代码段：

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
 
<template>
<!--创建路由的链接组件（路由接口）-->
  <div>
    <router-link to="/home">Home</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/about">About</router-link>
  </div>
  <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
  <router-view></router-view>
</template>

效果图：

 

 

 

 

路由传参

---

URL传参：一般用于页面跳转，将当前数据传递到新页面，例如详情页

params 传参  路径包含了参数

• 配置路由： {path: ‘/user/:id’, component: about}
• 传递方式： 传递后路径：/user/6
• 接收参数：$route.params.id

query 传参  ？后面

•  配置路由： {path: ‘/user/’, component: about}
• 传递方式： 传递后路径：/user?id=6
• 接收参数：$route.query.id

<template>
  <router-link to="/test?name=lucas">Test</router-link>
  <br>
  <router-link to="/helloworld">HelloWord</router-link>
  <router-view></router-view>
  <!--@是监听事件的，它就是监听childmsg的一个事件-->
  <!--<Test v-bind:name="name" :content=content  @childMsg="receive"></Test>-->
</template>

新的页面就可以通过$route.query.name就可以取值了。

 --------------------------------------------------------------------------------------------------------------------------------

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

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <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>

router-link​

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

router-view​

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

JavaScript

// 1. 定义路由组件，也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }


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


// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单

const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

// 5. 创建并挂载根实例
const app = Vue.createApp({})
// 确保 _use_ 路由实例使整个应用支持路由。
app.use(router)

app.mount('#app')

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

通过调用 app.use(router)，我们会触发第一次导航且可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由： 

// Home.vue
export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    },
  },
  methods: {
    goToDashboard() {
      if (isAuthenticated) {
        this.$router.push('/dashboard')
      } else {
        this.$router.push('/login')
      }
    },
  },
}

要在 setup 函数中访问路由，请调用 useRouter 或 useRoute 函数。我们将在 Composition API 中了解更多信息。

在整个文档中，我们会经常使用 router 实例，请记住，this.$router 与直接使用通过 createRouter 创建的 router 实例完全相同。我们使用 this.$router 的原因是，我们不想在每个需要操作路由的组件中都导入路由。