vue3路由笔记

1.路由

111

2.路由配置

• 安装路由模块： npm install vue-router@next --save
• 新建router.ts组件

import {createRouter,createWebHashHistory} from 'vue-router'
//引入组件
import Home from './Home.vue'
//配置路由
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/',
            component:Home,
        }
    ]
})
//暴露路由
export default router;

• main.ts中引入：

import { createApp } from 'vue'
import router from './router.ts'
let app = createApp(app)
app.use(router)
app.mount(#app)

• App.vue中挂在router-view

<template>
    <router-view></router-view>
</template>

3.动态路由

• 配置动态路由

• 路由跳转
• 获取路由 this.$route.params.id

拓展学习: 路由跳转get传值

js路由跳转

4.路由模式

4.1 hash模式

import {createRouter,createWebHashHistory} from 'vue-router'
//配置路由
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/home',
            component:Home,
        }
    ]
})
http://localhost:8080/#/home

4.2 HTML5 history模式

import {createRouter,createWebHistory} from 'vue-router'
//配置路由
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home,
        }
    ]
})
http://localhost:8080/home

5.命名路由

命名路由就是在router.ts文件中给路由配置name,到时候用的时候可以用name替换path

import {createRouter,createWebHistory} from 'vue-router'
//配置路由
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            name: 'home'
            path:'/home',
            component:Home,
        }
    ]
})
//使用如下
<router-link :to="{name:'home',query:{id:1}}"></router-link> 
<router-link :to="{name:'home',params:{id:1}}"></router-link> 
this.$router.push({name:'home',params:{id:1}})

6.路由重定向

7.路由别名