|
Vue Router： Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
效果
一、介绍
1、官方文档：https://router.vuejs.org/zh/introduction.html
介绍 | Vue RouterVue.js 的官方路由 https://router.vuejs.org/zh/introduction.html
2、功能：
嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码
二、准备工作
1、安装依赖包
npm install vue-router@4
2、示例版本
"vue-router": "^4.2.5",
三、目录结构
src
│ App.vue
│ main.ts
│
├─router
│ index.ts
│
└─view
HomeView.vue
AboutView.vue
TestView.vue
四、使用步骤
1、新建页面（含当前页面完整示例代码）
HomeView.vue
这是home页面
跳转至about
跳转至test
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function toAboutPage() {
router.push({
path: '/about',
query: {
title: '666'
}
})
}
function toTestPage() {
router.push({
path: '/test/' + 888,
})
}
AboutView.vue
这是about页面
跳转至home
跳转至test
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
function toHomePage() {
router.push({
name: 'home',
params: {
title: 'about'
}
})
}
function toTestPage() {
router.push({
name: 'test',
params: {
title: 111
},
})
}
console.log(route);
TestView.vue
这是test页面
跳转至home
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function toHomePage() {
router.push('/')
}
console.log(route);
2、路由配置
main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
routet/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(importa.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
},
{
path: '/test',
name: 'test',
component: () => import('../views/TestView.vue')
},
]
})
export default router
App.vue
Home
About
import { RouterLink, RouterView } from 'vue-router'
五、路由跳转
1、使用 router-link 组件进行导航 + 通过传递 `to` 来指定链接
Home
About
2、编程式导航
router.push('/') // 根页面，这里的“/”等同于home页面
router.push({
path: '/about',
})
注：必须配置下列代码
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
六、路由传参
1、普通路由
1）query
router.push({
path: '/about',
query: {
title: '666'
}
})
2）params
router.push({
name: 'home',
params: {
title: 'about'
}
})
2、动态路由
路由配参
{
path: '/test/:title',
name: 'test',
component: () => import('../views/TestView.vue')
},
动态传参
router.push({
path: '/test/' + 888,
})
接收参数
console.log(route);
打印结果
注：路由之间跳转用router，获取当前页面的路由信息用route
3、对比普通路由和动态路由在浏览器的展现形式
1）普通路由传参 - 有问号
2）动态路由传参 - 直接跟在地址后面
欢迎扫码下方二维码关注VX公众号
|