VUE3-路由 - 技术栈

router: 存放路由的文件夹

1.创建三个文件（相当于电脑）

About.vue Home.vue News.vue

2.创建路由index.ts（相当于路由器）

javascript 复制代码

//创建一个路由器，并暴露出去

//第一步:引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
//引入一个一个可能要呈现组件
import Home from '@/components/Home.vue' 
import News from'@/components/News.vue'
import About from '@/components/About.vue'

//第二步:创建路由器
const router = createRouter({
    history:createwebHistory()，//路由器的工作模式
    routes:[//一个一个的路由规则
        {
            path:'/home'
            component:Home
        },
        {
            path:'/news'
            component:News
        },
        {
            path:'/about'
            component:About
        }
    ]
})

//暴露出去router
export default router

3.在main.ts中配置路由器（注意：第一步创建的三个文件夹要有内容）

javascript 复制代码

//引入路由器
import router from './router'
//创建一个应用
const app = createApp(App)
//使用路由器
app.use(router)
//挂载整个应用到app容器中
app.mount('#app')

4.展示页面（App.vue文件）

javascript 复制代码

<template>
    <div class="app'>
        <h2 class="title">Vue路由测试</h2>
        <!--导航区--><div class="navigate">
        <div>
            <RouterLink to="/home" active-class="xiaozhupeiqi">首页</RouterLink>
            <RouterLink to="/news" active-class="xiaozhupeiqi">新闻</RouterLink>
            <RouterLink to="/about" active-class="xiaozhupeiqi">关于</RouterLink>
        </div>

        <!--展示区-->
        <div class="main-content">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script lang="ts" setup name="App">
    import {RouterView,RouterLink} from'vue-router'
</script>

<style>
</style>

存放的l两个注意点

1.路由组件通常存放在pages或views文件夹，一般组件通常存放在components文件夹。

2.通过点击导航，视觉效果上"消失"了的路由组件，默认是被卸载掉的，需要的时候再去挂载"。

3.路由组件：靠路由的规则渲染出来的一般组件：亲手写标签出来的

两种工作模式

history模式

优点:URL更加美观，不带有#，更接近传统的网站URL。

缺点:后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

2.hash模式

优点:兼容性更好，因为不需要服务器端处理路径。

缺点:URL带有#不太美观，且在SE0优化方面相对较差。

to的两种写法

<router-link active-class="active" to="/home">主</router-link>

<router-link active-class="active" :to=" (path: /home'}">Home</router-link>

嵌套路由

1.创建一个文件 Detail.vue

javascript 复制代码

<template>
    <ul class="news-list">
        <li>编号:xxx</li>
        <li>标题:xxx</li>
        <li>内容:xxx</li>
    </ul>
</template>

<script setup lang="ts" name="About">
</script>

<style scoped>...
</style>

2.在index.ts路由器中追加子集路由children

javascript 复制代码

//引入一个要呈现组件
import Detail from@/pages/Detail.vue



//在第二步中的index.js中添加的children
        {
            path:'/news'
            component:News
            children:[
                {
                    path:'detail',
                    component:Detail
                }
            ]
        },

2.在News.vue文件里嵌套路由，需要在路由文件router文件夹中的index.ts中嵌套

javascript 复制代码

<template>
    <div class="news
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <a href="#">{{news.title}}</a>
            </1i>
        </ul>
        <!--展示区-->
        <div class="news-content">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts" name="News">

import {reactive} from 'vue

const newsList = reactive([
    {id:'asfdtrfayo1',title:'很好的抗癌食物',content:'西蓝花'}，
    {id:'asfdtrfayo2',title:'如何一夜暴富',content:'学IT'},
    {id:'asfdtrfay03',title:震惊，万万没想到',content:'明天是周一'}，
    {id:'asfdtrfay04',title:'好消息!',content:'快过年了'}
]}

</script>