Vue-router-路由机制

Vue-路由机制

路由（Router）就是根据不同的 URL 地址展示不同的内容或页面

单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验
路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面

安装依赖

正如我们之前所学的那样，vue是一个渐进式框架，所以在使用路由功能之前，我们需要导入路由所需依赖

npm install vue-router

使用路由

建立规则文件（router.js） -> 在main.js中将规则文件应用在App.vue文件中 -> 在App.vue中使用标签定义被替换内容

router.js

导入API：

createRouter：创建一个路由规则对象，这个对象最后会被暴露
- history：存放路由器的历史记录
- routes：记录页面和路径之间的路由关系
createWebHashHistory：创建一个存放路由历史记录的对象，作为Router的第一个参数history的值

这个API的导入框架不再是vue，而是vue-router

// 导入创建路由对象时所需函数
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入.vue组件
import Home from '../components/Home.vue'
import Update from '../components/Update.vue'
import Add from '../components/Add.vue'
import List from '../components/List.vue'
// 创建一个路由对象
const router = createRouter({
    // history属性用于记录路由的历史
    history: createWebHashHistory(),
    // 用于定义多个不同路径和组件之间的对应关系
    routes: [
        {
            path: "/home",
            component: Home
        },
        {
            path: "/add",
            component: Add
        },
        {
            path: "/update",
            component: Update
        },
        {
            path: "/list",
            component: List
        },
        {
            path: "/",
            component: Home
        }
    ]
})

// 向外暴露router
export default router

main.js

将路由规则导入后，挂载对象之前使用路由

import { createApp } from 'vue'

import App from './App.vue'

// 在整个App.vue中可以使用路由
import router from './routers/router.js'

const app = createApp(App)

// 在挂载对象之前，先使用路由
app.use(router)

app.mount('#app')

App.vue

在App.vue中使用router-view标签，定义被替换内容的位置

使用router-link标签可快速跳转到指定的页面

注：router-link标签并不只应用于App.vue的组件，换句话说，app.vue也仅仅是一个组件而已，其他组件当然也可以使用router-link标签实现页面的跳转

<script setup>

</script>

<template>
  <div>
    App开头的内容 <br>
    <router-link to="/home">Home页</router-link>
    <router-link to="/list">List页</router-link>
    <router-link to="/update">Update页</router-link>
    <router-link to="/add">Add页</router-link>
    <hr>
    <!-- 该标签会被替换成具体的.vue -->
    <router-view></router-view>
    <hr>
    App结尾的内容
  </div>

</template>

<style scoped>
x
</style>

路由的重定向

我们可以在router.js的路由规则中，加入路由重定向

{
    path: "/showAll",
    redirect:"/list"
}

这段代码是：当我们访问showAll这个路径时，不再寻找某个组件，而是将页面重定向/list这个url上

这里并不是将整个页面跳转，仍然是在路由的基础上重定向到url

注：redirect属性的值为字符串，其中为路径

router-view的name属性

可以存在多个router-view

同时也可以通过name属性，设置router-view专门展示某一个页面

App.vue

<script setup>

</script>

<template>
  <div>
    App开头的内容 <br>
    <router-link to="/home">Home页</router-link> &nbsp
    <router-link to="/list">List页</router-link> &nbsp
    <router-link to="/update">Update页</router-link> &nbsp
    <router-link to="/add">Add页</router-link> &nbsp
    <router-link to="/list">showAll页</router-link>
    <hr>
    <!-- 该标签会被替换成具体的.vue -->
    <router-view></router-view>
    <hr>
    Home页<router-view name="homeView"></router-view>
    <hr>
    List页<router-view name="listView"></router-view>
    <hr>
    update页<router-view name="updateView"></router-view>
    <hr>
    add页<router-view name="addView"></router-view>
    <hr>
    App结尾的内容
  </div>

</template>

<style scoped>

</style>

router.js

路由规则中的对应关系，把路径 -> 组件改写成路径 -> name属性相同的组件

在routes里的参数，组件属性component改写成components对象，其中内容为：

home值:组件名

对于name值为空的router-view标签，我们可以通过 default:组件名设置其替换内容

……
routes: [
    {
        path: "/home",
        components:{
            default:Home,
            homeView:Home
        }
    },
    {
        path: "/add",
        components:{
            default:Home,
            addView:Add
        }
    },
    {
        path: "/update",
        components:{
            default:Home,
            updateView:Update
        } 
    },
    {
        path: "/list",
        components:{
            default:Home,
            listView:List
        } 
    },
    {
        path: "/",
        component: Home
    },
    {
        path: "/showAll",
        redirect:"/list"
    }
]
……

然而，一个普通的项目中，一个router-view即可解决百分之99的问题，所以这个知识点我们只需要了解，还是白学 😓

Vue-声明式路由和编程式路由

使用router-link的方式是声明式路由，to属性为要跳转的路径，这种方式是固定跳转页面

我们也可以使用编程式路由，在js代码中跳转页面，搭配双向绑定的响应式数据，可实现灵活的页面跳转

<script setup>
  // 从vue-router框架中导入useRouterAPI
  import { useRouter } from "vue-router"
  import {ref} from "vue"
  // 这个对象就是router.js暴露出来的对象
  const router = useRouter()
  
  let myPath = ref("")
  
  //router的push方法，可以跳转页面
  function goMyPage(){
    // 以下两种写法都可以
    // router.push(myPath)
    router.push({
      path:myPath.value
    })
  }

</script>

<template>
  <div>
    <!-- 声明式路由 -->
    <router-link to="/home">Home页</router-link> &nbsp
    <router-link to="/list">List页</router-link> &nbsp
    <router-link to="/update">Update页</router-link> &nbsp
    <router-link to="/add">Add页</router-link> &nbsp
    <router-view></router-view>
    <!-- 编程式路由 -->
    <input type="text" v-model="myPath"><button @click="goMyPage()">GO</button>
  </div>
</template>

<style scoped>

</style>

当我们需要固定跳转页面时，选择声明式路由

如果需要灵活的页面跳转，就选择编程式路由

#前端工程化

Vue-router-路由传参上一篇

Vue-组件下一篇