z1. 普通函数的页面跳转
<template>
<router-view></router-view>
<router-link to="/">首页</router-link>
<button @click="go">我的</button>
</template>
<script setup>
import { useRouter } from 'vue-router'
// 使用 useRouter 创建一个 router 实例
const router = useRouter()
// 定义 go 函数以便路由跳转
function go() {
router.push({ path: '/my' })
}
// 将 go 函数暴露给模板
</script>
2.箭头函数的实现方法
<template>
<router-view></router-view>
<router-link to="/">首页</router-link>
<button @click="go">我的</button>
</template>
<script setup>
import { useRouter } from 'vue-router'
// 使用 useRouter 创建一个 router 实例
const router = useRouter()
// 定义 go 函数以便路由跳转
const go = () => {
router.push('/my')
}
</script>
在router 文件夹下的 index.vue文件添加 ' /my ' 路由
{
path: '/my',
component: () => import('@/views/my'),
hidden: true
},
在 permission.js白名单文件下 添加 '/my'
const whiteList = ['/login', '/register', '/forget_pwd', '/index', '/my']
注 :下面是 Vue Router 的组件,用于处理 Vue 应用中的路由功能。它们通常用于定义路由的视图和链接。
<router-view>
是一个用于展示匹配路由组件的占位符。- <一> 嵌套路由
-
1. 路由路径和组件的关系
在 Vue 应用中,路由路径(例如
/home
、/about
)与组件(例如HomeComponent
、AboutComponent
)是关联的。const routes = [ { path: '/', component: HomeComponent }, { path: '/about', component: AboutComponent } ]
2. 路由视图占位符
-
<router-view> 是一个占位符,用于告诉Vue Router 在这个位置渲染当前路由匹配的组件。可以把它理解为一个动态的容器,负责显示与当前路径相匹配的组件。
-
3. 路由视图占位符
当用户在浏览器中导航到不同的路径时。Vue Router 会根据路由配置找到对应的组件,并将这些组件渲染到<router-view> 中 。列如:
当用户访问 / 路径时,HomeComponent 会被渲染到 <router-view> 位置
当用户访问 /about 路径时,AboutComponent 会被渲染到 <router-view> 位置
4. 示例
假设你有一个简单的Vue 应用,有两个页面:主页面和关于页。路由配置如下
const routes = [
{ path: '/', component: HomeComponent },
{ path: '/about', component: AboutComponent }
]
-
<template> <div> <router-view></router-view> </div> </template>
当用户访问 / 路径时,HomeComponent 会被渲染到 <router-view> 位置
-
<!-- HomeComponent --> <template> <div> <h1>Home Page</h1> </div> </template>
当用户访问 /about 路径时,AboutComponent 会被渲染到 <router-view> 位置
-
<!-- AboutComponent --> <template> <div> <h1>About Page</h1> </div> </template>
<二> 命名视图 :允许你在一个页面中同时展示多个
<router-view>
,每个<router-view>
可以渲染不同的组件。 -
1.当用户访问路径 /dashboard 时,vue router 会同时渲染所有与该路径相关的组件到各自的命名视图中。所有的<router-view>组件会同时被填充内容,而不是按某种顺序或条件来渲染。
-
2. 假设有以下路由配置
-
// router/index.js import { createRouter, createWebHistory } from 'vue-router' import HeaderComponent from '../components/HeaderComponent.vue' import MainComponent from '../components/MainComponent.vue' import FooterComponent from '../components/FooterComponent.vue' const routes = [ { path: '/dashboard', components: { header: HeaderComponent, main: MainComponent, footer: FooterComponent } } ] const router = createRouter({ history: createWebHistory(), routes }) export default router
以及对应的Vue组件模板
<!-- App.vue --> <template> <div> <router-view name="header"></router-view> <router-view name="main"></router-view> <router-view name="footer"></router-view> </div> </template>
HeaderComponent.vue:
<template> <header> <h1>Header</h1> </header> </template>
MainComponent.vue:
<template> <main> <h2>Main Content</h2> </main> </template>
FooterComponent.vue:
-
<template> <footer> <p>Footer</p> </footer> </template>
<router-link>
是一个用于生成导航链接的组件,使得用户可以通过点击链接来改变当前的路由。