Vue路由基本用法

Vue路由

前端路由的概念与原理

SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。

此时，不同组件之间的切换需要通过前端路由来实现。

结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！

前端路由的工作方式

1. 用户点击了页面上的路由链接
2. 导致了 URL 地址栏中的 Hash 值发生了变化
3. 前端路由监听了到 Hash 地址的变化
4. 前端路由把当前 Hash 地址对应的组件渲染到浏览器中

vue-router 的基本用法

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目

中组件的切换。

vue2的vue-router版本是vue-router 3.x

vue3的vue-router版本是vue-router 4.x

vue-router 4.x 的基本使用步骤

1. 在项目中安装 vue-router
2. 定义路由组件
3. 声明路由链接和占位符
4. 创建路由模块
5. 导入并挂载路由模块

安装命令

npm install vue-router@next -S

定义路由组件

在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件，将来要使用 vue-router 来控制它们

的展示与切换：

App.vue

<template>
<div>
  <h1>App组件</h1>
<!--  声明路由链接-->
  <router-link to="/home">首页</router-link>&nbsp;
  <router-link to="/movie">电影</router-link>&nbsp;
  <router-link to="/about">关于</router-link>
  
<!--  声明路由占位符-->
  <router-view></router-view>
</div>
</template>

<script>
export default {
name: "App.vue"
}
</script>

<style scoped>

</style>

MyHome.vue

<template>
<h3>MyHome组件</h3>
</template>

<script>
export default {
name: "MyHome"
}
</script>

<style scoped>

</style>

MyAbout.vue

<template>
<h3>MyAbout组件</h3>
</template>

<script>
export default {
  name: "MyAbout"
}
</script>

<style scoped>

</style>

MyMovie.vue

<template>
<h3>MyMovie组件</h3>
</template>

<script>
export default {
  name: "MyMovie"
}
</script>

<style scoped>

</style>

声明路由链接和占位符

可以使用 <router-link> 标签来声明路由链接，并使用 <router-view> 标签来声明路由占位符。示例代码如下：

<template>
<div>
  <h1>App组件</h1>
<!--  声明路由链接-->
  <router-link to="/home">首页</router-link>&nbsp;
  <router-link to="/movie">电影</router-link>&nbsp;
  <router-link to="/about">关于</router-link>

<!--  声明路由占位符-->
  <router-view></router-view>
</div>
</template>

<script>
export default {
name: "App.vue"
}
</script>

<style scoped>

</style>

创建完成之后启动项目发现页面有报错，因为没有配置路由模块

创建路由模块

在项目中创建 router.js 路由模块，在其中按照如下 4 个步骤创建并得到路由的实例对象：

1. 从 vue-router 中按需导入两个方法
2. 导入需要使用路由控制的组件
3. 创建路由实例对象
4. 向外共享路由实例对象
5. 在 main.js 中导入并挂载路由模块

router.js

/**
 * createRouter:创建路由实例对象
 * createWebHashHistory:指定路由的工作模式
 */
import {createRouter ,createWebHashHistory} from "vue-router";
import MyHome from "./MyHome.vue";
import MyMovie from "./MyMovie.vue";
import MyAbout from "./MyAbout.vue";

const router = createRouter({
    //指定工作模式
    history:createWebHashHistory(),
    //配置路由
    routes:[
        {path:'/home',component:MyHome},
        {path:'/movie',component:MyMovie},
        {path:"/about",component:MyAbout}
    ]
})

export default router