一、安装及配置路由

1、安装路由模块

npm install vue-router@4 --save

2、components文件夹中新建组件Home.vue和User.vue

//Home.vue
<template>
    我是Home组件
</template>

//User.vue
<template>
    我是User组件
</template>

3、配置路由

在src文件夹下新建routes.ts文件

import { createRouter, createWebHashHistory } from 'vue-router'

import Home from './components/Home.vue'
import User from './components/User.vue'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/home', component: Home },
        { path: '/user', component: User },
    ],
})

export default router

4、在main中挂载路由

import { createApp } from 'vue'
import App from './App.vue'
import route from './routes';

const app = createApp(App);
app.use(route);
app.mount('#app');

5、渲染组件及路由跳转

在App.vue中

<template>
<router-link to="/home">跳转到Home</router-link>
<router-link to="/user">跳转到User</router-link>
<router-view></router-view>
</template>

二、动态路由

1、配置动态路由

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/home', component: Home },
        { path: '/user', component: User },
        { path: '/userDetails/:myID', component: UserDetails }, //动态路由
    ],
})

2、动态路由跳转

<router-link :to="`/userDetails/${111}`">跳转到用户详情并传入myID=111</router-link>

3、在UserDetails组件中获取myID的值

this.$route.params

三、Get传值路由

1、配置路由

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/home', component: Home },
        { path: '/user', component: User },
        { path: '/userDetails, component: UserDetails }, //Get传值
    ],
})

2、动态路由跳转

<router-link :to="`/userDetails?myID=111`">跳转到用户详情并传入myID=111</router-link>

3、在UserDetails组件中获取myID的值

this.$route.query

四、JS跳转路由

this.$router.push({ path: '/home' });

this.$router.push({ path: '/userDetails/111' }); //需配置动态路由

this.$router.push({ path: '/userDetails',  query:{myID:111} }); //配置Get传值路由即可

五、命名路由跳转及传值

1、配置路由

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/home', component: Home },
        { path: '/user', component: User },
        { path: '/userDetails/:myID, name: 'myUserDetails' component: UserDetails }, //动态路由传值
        { path: '/userDetails, name: 'myUserDetailsGet' component: UserDetails }, //Get传值
    ],
})

2、命名动态路由

<router-link :to="{ name: 'myUserDetails', params: { myID: 111 }}">跳转</router-link>

或

this.$router.push({ name: 'myUserDetails', params: { myID: 111 }})

3、Get传值路由

<router-link :to="{ name: 'myUserDetailsGet', query: { myID: 111 }}">跳转</router-link>

或

this.$router.push({ name: 'myUserDetailsGet', query: { myID: 111 }})

六、路由重定向

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '', redirect:"/home" },  //路由重定向，当输入空的时候跳转到home页
        { path: '', redirect: { name: 'myUserDetailsGet' }},  //针对命名路由
        { path: '/home', component: Home },
        { path: '/user', component: User },
        { path: '/userDetails/:myID, name: 'myUserDetails' component: UserDetails }, //动态路由传值
        { path: '/userDetails, name: 'myUserDetailsGet' component: UserDetails }, //Get传值命名路由
    ],
})

七、别名路由

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/home', component: Home },
        { path: '/user', component: User },
        { path: '/userDetails/:myID, name: 'myUserDetails', alias:"/u:myID" component: UserDetails }, //动态路由传值
        { path: '/userDetails, name: 'myUserDetailsGet', alias:["/u","/s"] component: UserDetails }, //Get传值命名路由
    ],
})