手把手喂饭Vue Router实战指南

站长

2024年07月30日 16:20 · 阅读数 27

路由介绍

在Vue.js中，使用Vue Router库可以轻松实现根据URL变化来切换显示不同组件的功能，从而达到模拟多页面应用的效果。Vue Router利用了前端路由的概念，使得用户在不重新加载整个页面的情况下浏览应用程序的不同部分。下面这个系统模块就是使用路由页面来实现的。手把手喂饭Vue Router实战指南

初始router

安装Vue Router

首先，确保你已经安装了Vue环境后并创建了一个Vue项目。然后，通过Vue CLI或手动安装Vue Router：

npm install vue-router

安装 | Vue Router (vuejs.org)

当然如果你使用的是vue3+vite版本可以直接选择路由，不用再进项下载。下面我还是带大家了解一下自己进行路由配置的步骤。

配置Vue Router

假设你是什么包都没有的下载的状态，安装完Vue Router时候运行项目，项目能正常执行后我们在src路径下创建一个router文件夹在创建一个index.js文件

手把手喂饭Vue Router实战指南

接下来我们配置这个index.js文件

import {createRouter ,createWebHistory} from 'vue-router'
//路由文件
import Home from '../views/Home.vue'  
import About from '../views/About.vue'
import Projects from '../views/Projects.vue'
//设置routes数组
const routes = [  
  { path: '/',  component: Home },
  { path: '/about',  component: About },
  { path: '/projects',  component: Projects },
]

const router = createRouter({
  history:createWebHistory(),
  routes:routes
})
export default router

手把手喂饭Vue Router实战指南

Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。这里的createWebHistory是使用history模式。使用createWebHistory创建了history模式的路由器。这种方式可以让URL看起来更干净，没有#符号，后面我们在详细讲解。

配置完index.js文件后去到main.js文件中导入router并将调用App.use('router')。确保在你的主Vue实例（通常是src/main.js）中引入并使用Vue Router。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')

在主应用中使用Vue Router

将组件们的结构样式安排之后为路由匹配时显示的内容。在你的App.vue或任何你想放置导航链接的地方，使用<router-link>组件来创建导航链接。

  <template>
    <div id="app">
      <nav>
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link> |
        <router-link to="/projects">Projects</router-link>|
        <router-link to="/profile">Profile</router-link>
      </nav>
      <router-view/>
    </div>
  </template>

手把手喂饭Vue Router实战指南

这样我们便实现了一个基本的路由配置，接下来我们再来理解一下进阶操作。手把手喂饭Vue Router实战指南

如何获取传过来的动态参数？

修改index文件的path

使用Vue Router进行路由管理时，获取传递过来的动态参数非常直接在你的路由配置文件中router/index.js文件中，需要为接收动态参数的路由定义。

手把手喂饭Vue Router实战指南

这里使用about做例子，将path路径后加上/:id，其中的:id是一个占位符，表示该部分路径可以动态改变，用于匹配任何非斜杠字符序列。

跳转地址配置

<template>
  <div>This About----------- {{ $route.params.id }}--{{ props.id }}</div>
</template>

<script setup>
import {useRoute } from"vue-router" 
const route = useRoute()
console.log(route.params.id);
const props=defineProps({
    id:String
})
</script>

$route: $route是一个非常重要的实例属性，它提供了当前激活路由的信息。Vue3使用$route的方式在新式写法中逐渐被Composition Function如useRoute所取代。。
useRoute:这个函数用于在组件内部获取当前激活的路由信息。
Params :适用于路由的一部分，它们是URL结构的组成部分，变化会影响URL的外观。
defineProps:来定义组件接受的props,用来替代传统的props选项。会自动匹配传递过来的值。

指定跳转方向

router.push({path:''})

<template>
  <div>
    this Home
    <button @click="gotoAbout">Goto About</button>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
const router=useRouter()
const id=120
function gotoAbout() {
  router.push({path:`/about/:${id}`)
}

手把手喂饭Vue Router实战指南

router.push({name:''},params:{id:123})

当你设置路由为 { path: '/about/:id', component: About, name: 'About', props: true } 并且在 About 组件内部直接使用 $route.params.id 时，直接访问 /about 路径（没有提供:id参数）会导致路由匹配失败，因为:id是一个必填的动态参数。

手把手喂饭Vue Router实战指南

<script setup>
import {useRouter} from 'vue-router'
const router=useRouter()
const id=120
function gotoAbout() {
  router.push({name:'About',params:{id:id}})
}
</script>