08 Vue3 路由

一、路由

https://next.router.vuejs.org/ 官网

https://router.vuejs.org/zh/installation.html 中文文档

1.1 安装路由模块

npm install vue-router@next  --save

1.2 配置路由

创建src/routers.ts

import {createRouter, createWebHashHistory} from 'vue-router';
// 引入组件
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import User from "@/components/User.vue";

// 配置路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '/', component: Home},
        {path: '/news', component: News},
        {path: '/user', component: User},
    ]
});

export default router;

挂载路由 main.ts

import {createApp} from 'vue'
import App from './App.vue'
// 引入配置好的路由
import router from "@/routes";

// 老写法
// createApp(App).mount('#app');

const app = createApp(App);
// 挂载路由
app.use(router);
app.mount('#app');

根组件里渲染组件 App.vue

App.vue中通过router-view渲染组件

<template>
    <ul class="header">
        <li>
            <router-link to="/">首页</router-link>
        </li>
        <li>
            <router-link to="/news">新闻</router-link>
        </li>
        <li>
            <router-link to="/user">用户</router-link>
        </li>
    </ul>
    <!--根组件 渲染组件 表示-->
    <router-view></router-view>
</template>

<script lang="ts">
    import {defineComponent} from 'vue';

    export default defineComponent({
        name: 'App',
    });
</script>

<style lang="scss" scoped>
    * {
        margin: 0px;
        padding: 0px;
    }
    .header {
        width: 100%;
        height: 44px;
        line-height: 44px;
        list-style: none;
        background: #000000;
        color: #ffffff;

        li {
            display: inline-block;
            margin-right: 20px;
            color: #ffffff;

            a {
                color: #ffffff;
            }
        }
    }
</style>

1.3 动态路由

配置动态路由 routers.ts

import {createRouter, createWebHashHistory} from 'vue-router';
// 引入组件
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import User from "@/components/User.vue";
import NewsContent from "@/components/NewsContent.vue";

// 配置路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '/', component: Home},
        {path: '/news', component: News},
        {path: '/user', component: User},
        // 动态路由 :aid 可以匹配路由上的值，例如：/newscontent/123  此时，aid=123
        {path: '/newscontent/:aid', component: NewsContent},
    ]
});

export default router;

路由跳转 News.vue

<template>
    <h1>News组件</h1> <br>
    <ul>
        <li v-for="(item, index) in list" :key="index">
            <!--动态路由跳转-->
            <router-link :to="`/newscontent/${index}`">{{item}}</router-link>
        </li>
    </ul>
</template>

<!-- 设置语言为ts -->
<script lang="ts">
    import {defineComponent} from 'vue'

    interface News {
        list: string[]
    }

    export default defineComponent({
        name: "News",
        data() {
            return {
                list: []
            } as News
        },
        mounted(): void {
            for (let i = 0; i < 10; i++) {
                this.list.push(`我是第${i}条新闻`)
            }
        }
    })
</script>

<style scoped>
</style>

获取动态路由传过来的参数 NewsContent.vue

<template>
    <h1>newsContent组件---{{aid}}</h1>
</template>

<!-- 设置语言为ts -->
<script lang="ts">
    import {defineComponent} from 'vue'

    export default defineComponent({
        name: "NewsContent",
        data() {
            return {
                aid: ""
            }
        },
        mounted(): void {
            // 获取动态路由传过来的值
            console.log(this.$route.params);
            this.aid = this.$route.params.aid[0];
        }
    })
</script>

<style scoped>
</style>

1.4 Get传值

配置路由 routers.ts

{path: '/newscontent', component: NewsContent}

路由跳转 News.vue

        <li v-for="(item, index) in list" :key="index">
            <!--Get路由跳转-->
            <router-link :to="`/newscontent?aid=${index}`">{{item}}</router-link>
        </li>

获取Get路由传过来的参数 NewsContent.vue

<!-- 设置语言为ts -->
<script lang="ts">
    import {defineComponent} from 'vue'


    export default defineComponent({
        name: "NewsContent",
        data() {
            return {
                // 获取get路由传过来的值
                aid: this.$route.query.aid
            }
        },
        mounted(): void {
            // 获取get路由的传值
            console.log(this.$route.query);
        }
    })
</script>

1.5 路由编程式导航

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

// 动态路由传值
this.$router.push({
    path: '/newscontent/1'
})

// Get路由传值
this.$router.push({
    path: '/newscontent', query:{aid:1}
})

1.6 路由HTML5 history模式和hash模式

hash 模式 router.ts

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

// 配置路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        ...
    ]
});

export default router;

http://localhost:8080/#/user

http://localhost:8080/#/news

如果想把上面的路由改变成下面的方式

# 没有“#”
http://localhost:8080/user

http://localhost:8080/news

HTML5 history模式 router.ts

import {createRouter, createWebHistory} from 'vue-router';

// 配置路由
const router = createRouter({
    history: createWebHistory(),
    routes: [
        ...
    ]
});

export default router;

**注意：**开启HTML5 history模式后，发布到服务器需要配置伪静态：

https://router.vuejs.org/zh/guide/essentials/history-mode.html

1.7 命令路由

配置路由 routers.ts

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        ...
        // 动态路由
        {
            path: '/user/:userid', 
            name: 'user',
            component: User
        },
        // Get传参
        {
            path: '/news', 
            name: 'news',
            component: User
        },
    ]
});

使用

// 动态路由
<router-link :to="{name: 'user', params: {userId: 123}}">{{item}}</router-link>

// get传参
<router-link :to="{name: 'news', query: {aid: 123}}">{{item}}</router-link>

this.$router.push({name: 'user', params: {userId: 123}})

this.$router.push({name: 'news', query: {aid: 123}})

1.8 路由重定向

配置路由 routers.ts

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '', redirect: '/home'},
    ]
});

重定向也可以针对命名路由:

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '/home', redirect: {name: 'homepage'}},
    ]
});

1.9 路由别名

配置路由 routers.ts

import {createRouter, createWebHashHistory} from 'vue-router';
// 引入组件
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import User from "@/components/User.vue";
import NewsContent from "@/components/NewsContent.vue";

// 配置路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '/', component: Home},
        // alias 路由起多个别名
        {path: '/news', component: News, alias:["/news01", "/news02"]},
        // alias 路由起别名，可以通过 /people 访问 /user
        {path: '/user', component: User, alias: '/people'},
        {path: '/newscontent', component: NewsContent},
    ]
});

export default router;

1.10 嵌套路由

配置路由 routers.ts

import {createRouter, createWebHashHistory} from 'vue-router';
// 引入组件
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import User from "@/components/User.vue";
import UserList from "@/components/User/UserList.vue";
import UserAdd from "@/components/User/UserAdd.vue";

// 配置路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '/', component: Home},
        {path: '/news', component: News},
        {
            // 嵌套路由
            path: '/user', component: User,
            // 在父组件User里去渲染子组件，该子组件UserList和UserAdd只在父组件里指定的位置上渲染
            children: [
                {path: '', redirect: '/user/list'},
                {path: 'list', component: UserList},
                {path: 'add', component: UserAdd},
            ]
        },
    ]
});

export default router;

创建子组件User/userList.vue

<template>
    <div>
        UserList 组件
    </div>
</template>

<script lang="ts">
    import {defineComponent} from 'vue';

    export default defineComponent({
        name: "UserList"
    })
</script>

<style scoped>

</style>

创建子组件User/userAdd.vue

<template>
    <div>
        UserAdd 组件
    </div>
</template>

<script lang="ts">
    import {defineComponent} from 'vue';

    export default defineComponent({
        name: "UserAdd"
    })
</script>

<style scoped>

</style>

父组件User.vue

<template>
    <div class="content">
        <div class="left">
            <ul>
                <li>
                    <router-link to="/user/list">用户列表</router-link>
                </li>
                <li>
                    <router-link to="/user/add">增加用户</router-link>
                </li>
            </ul>
        </div>
        <div class="right">
            <!--该子组件只在这个div里渲染-->
            <router-view></router-view>
        </div>
    </div>
</template>

<script lang="ts">
    import {defineComponent} from 'vue';

    export default defineComponent({
        name: "User",
    })
</script>

<style lang="scss" scoped>
    .content {
        display: flex;

        .left {
            width: 200px;
            min-height: 400px;
            border-right: 1px solid #eeeeee;
            padding-top: 20px;

            ul {
                list-style: none;

                li {
                    margin-bottom: 20px;
                    text-align: center;
                }
            }
        }

        .right {
            /* 自适应 */
            flex: 1;
        }
    }

</style>