尚硅谷天禹老师主讲-Vue3-06-路由

最新推荐文章于 2024-04-24 16:18:31 发布

有点小懒懒

最新推荐文章于 2024-04-24 16:18:31 发布

阅读量387

点赞数 3

分类专栏： Vue3 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_51148337/article/details/137541533

版权

Vue3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue中的路由机制，包括基本路由配置、组件切换、命名路由、嵌套路由以及工作模式（history和hash）的区别。还展示了如何在导航中使用RouterLink和active-class实现样式切换。

摘要由CSDN通过智能技术生成

对路由route的理解

路由就是一组key-vaule的对应关系
多个路由，需要经过路由器处理

路由_基本切换效果

导航区、展示区

<template>
    <div class="app">
        <h2 class="title">Vue路由测试</h2>
        <!-- 导航区 -->
        <div class="navigate">
            <RouterLink to="/home" active-class="active">首页</RouterLink>
            <RouterLink to="/news" active-class="active">新闻</RouterLink>
            <RouterLink to="/about" active-class="active">关于</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>
    /* App */
  .title {
    text-align: center;
    word-spacing: 5px;
    margin: 30px 0;
    height: 70px;
    line-height: 70px;
    background-image: linear-gradient(45deg, gray, white);
    border-radius: 10px;
    box-shadow: 0 0 2px;
    font-size: 30px;
  }
  .navigate {
    display: flex;
    justify-content: space-around;
    margin: 0 100px;
  }
  .navigate a {
    display: block;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background-color: gray;
    text-decoration: none;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
  }
  .navigate a.active {
    background-color: #64967E;
    color: #ffc268;
    font-weight: 900;
    text-shadow: 0 0 1px black;
    font-family: 微软雅黑;
  }
  .main-content {
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10px;
    width: 90%;
    height: 400px;
    border: 1px solid;
  }
</style>

展示区必须：，不然无法看到页面

请来路由器

main.ts代码

//引入createApp用于创建应用
import { createApp } from "vue";
//引入App根组件
import App from './App.vue'
//引入路由器
import router from './router'

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

指定路由规则的具体规则（什么路径，对应着什么组件）

新建一个router文件夹，index.ts

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

//第一步：引入createRounter
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

形成一个【？？.vue】

路由文件：Home.vue代码

<template>
  <div class="home">
    <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
  </div>
</template>

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

</script>

<style scoped>
  .home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
</style>

注意

如果想要点击"首页"、“新闻”，切换路由页面，样式也跟着变化

active-class=“定义好的样式”
如果想要点击"首页"，自动引入路由，不需要手动改变，

a标签——>RounterLink
```
<RouterLink to="/home" active-class="active">首页</RouterLink>
```

路由_两个注意点

路由组件通常放在pages或views文件夹，一般组件通常存放在components文件夹。
- 路由组件：靠路由的规则渲染出来的
- 一般组件：亲手写标签出来的

通过点击导航，视觉上“消失”了的路由组件，默认是被卸载的，需要的时候重新挂载。

验证：about.vue，只要点击"关于"，就会重新挂载，点击其他，就会卸载

<template>
  <div class="about">
    <h2>大家好，欢迎来到尚硅谷直播间</h2>
  </div>
</template>

<script setup lang="ts" name="About">
  import { onMounted, onUnmounted } from 'vue'

  onMounted(() => {
    console.log('about组件挂载了');
  })
  onUnmounted(() => {
    console.log('about组件卸载了');
  })
</script>

路由_路由器工作模式

history模式

优点：URL更加美观，不带有#，更接近传统网站URL；缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。（不懂）

Vue2：mode:‘history’

Vue3：history:createWebHistory()

React：BrowserRouter

hash模式

优点：兼容性更好，不需要服务器处理路径问题；缺点：URL带有#不太美观，且在SEO优化方面性能较差。

//替换 router/index.ts里面路由工作模式
//第一步：引入createRounter
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

//第二步：创建路由器
const router = createRouter({
    history: createWebHashHistory(), //路由器的工作模式

// 网页路径改变：http://localhost:5173/#/
// history模式网页路径：http://localhost:5173/

路由_to的两种写法

第一种字符串写法：App.vue里面导航区

        <div class="navigate">
            <RouterLink to="/home" active-class="active">首页</RouterLink>
            <RouterLink to="/news" active-class="active">新闻</RouterLink>
            <RouterLink to="/about" active-class="active">关于</RouterLink>
        </div>

第二种对象写法（path跳转）：

<RouterLink :to="{path:'/about'}" active-class="active">关于</RouterLink>

路由_命名路由

router/index 可以给路由加上name

routes: [ //一个个路由
        {
            name: 'zhuye',
            path: '/home',
            component: Home
        },
        {
            name: 'xinwen',
            path: '/news',
            component: News
        },
        {
            name: 'guanyu',
            path: '/about',
            component: About
        }
    ]

App.vue 对象name路由跳转：

<RouterLink :to="{name:'xinwen'}" active-class="active">新闻</RouterLink>

路由_嵌套路由

如何使得上述新闻的小li里面不是固定的，可以循环得到，News.vue

//key不能丢 v-for循环得到
<template>
  <div class="news">
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <a href="#">{{news.title}}</a>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="News">
  import { reactive } from 'vue'

const newsList = reactive([
  { id: '12345', title: '十种抗癌食物', content: '西兰花' },
  { id: '12346', title: '九种抗癌食物', content: '西兰花2' },
  { id: '12347', title: '八种抗癌食物', content: '西兰花3' },
  { id: '12348', title: '七种抗癌食物', content: '西兰花4' }
  ])
</script>

嵌套使用，点击不同新闻标题，就能获取不同新闻内容

components/Details.vue放置新闻详情

<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>
  .news-list {
    list-style: none;
    padding-left: 20px;
  }

  .news-list>li {
    line-height: 30px;
  }
</style>

router/index.ts引入details.vue

import Details from '@/components/Details.vue'


        {
            name: 'xinwen',
            path: '/news',
            component: News,
            children: [
                {
                    path: 'detail',
                    component: Details
                }
            ]
        },

News.vue必须配置相关参数

RouterLink下面必须写详细路径 /news/detail 不然无法匹配到

 <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <RouterLink to="/news/detail">{{news.title}}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>


  import { RouterView,RouterLink } from 'vue-router';

有点小懒懒

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
尚硅谷天禹老师主讲-Vue3-06-路由

优点：URL更加美观，不带有#，更接近传统网站URL；缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。缺点：URL带有#不太美观，且在SEO优化方面性能较差。如何使得上述新闻的小li里面不是固定的，可以循环得到，News.vue。如果想要点击"首页"、“新闻”，切换路由页面，样式也跟着变化。如果想要点击"首页"，自动引入路由，不需要手动改变，，只要点击"关于"，就会重新挂载，点击其他，就会卸载。通过点击导航，视觉上“消失”了的路由组件，默认是被。展示区必须：，不然无法看到页面。
复制链接

扫一扫

专栏目录