Vue3学习汇总（路由篇）

标签：title route 汇总 Vue3 组件 router path 路由

1.单一页面设计常用

存在导航栏和内容区，导航栏路由分配，内容区呈现组件内容；

<template>
  <div class="app">
    <h2 class="title">vue路由测试</h2>
    <!--    导航区     -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/new" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!--   展示区    -->
    <div class="main-content">

<!--  这里占位符  让路由组件放到此处    -->
      <Router-View ></Router-View>

    </div>
  </div>

</template>


<script lang="ts" setup >

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


</script>


<style scoped>


.title {
  text-align: center;
  word-spacing: 5px;
  margin: 30px 0;
  height: 70px;
  line-height: 70px;
  background-image: linear-gradient(45deg, grey, 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: grey;
  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>

2.理解 route（路由）和 router（路由器）

路由器是管理一堆路由，路由是一组 url 和 vue组件的对应；

3.vue项目文件规范

3.1路由器位置

通常路由文件会写在 src—>router—>index.ts 文件内，引入路由和组件、创建路由器、暴露路由、在main.ts中配置一下；

// router 路由器   route 路由

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

//第一步 引入createRouter  路由组件
// createWebHashHistory  哈希模式   history模式
import {createRouter, createWebHistory} from "vue-router";
import route_home from '../components/route_home.vue'
import route_new from '../components/route_new.vue'
import route_about from '../components/route_about.vue'

//第二步  创建路由器
const router=createRouter({
     history: createWebHistory(), //路由器的工作模式
    routes:[
        // 路由需要指明 路径和组件的对应关系 第一对路由关系
        {
            path:'/home',
            component:route_home
        },
        // 第二对路由关系
        {
            path:'/new',
            component:route_new
        },
        // 第三对路由关系
        {
            path:'/about',
            component:route_about
        }
    ]
})

// 将路由器暴露出去
export default router

// 剩下的需要去main.ts添加

3.2路由组件位置

路由组件一般放在 src—>pages 或者 src—>views 文件夹下，例如上述的route_home、route_new、route_about放置在pages文件夹下;

组件分为：一般组件和路由组件，一般组件放在components里面，路由组件放在pages 或者 views下；

4.路由页面渲染原理

点击不同链接渲染出不同的内容区，实际上是将旧的组件卸载（onUnmounted），将新的组件挂载（onMounted）

5.路由器工作模式

history模式

const router=createRouter({
     history: createWebHistory(), //路由器的工作模式
    routes:[
        // 路由需要指明 路径和组件的对应关系 第一对路由关系
    ]
})

优点：url不带#，美观；

缺点：项目上线，需要服务器端配合路径问题；

hash模式

const router=createRouter({

history: createWebHashHistory(), //路由器hash工作模式

routes:[ // 路由需要指明 路径和组件的对应关系 第一对路由关系 ] })

优点：兼容性好，不需要服务器处理路径；

缺点：url带#，不美观；

6.路由 RouterLink组件中 to的两种写法

方法一：（字符串写法）

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

方法二：

（对象写法 path跳转）

<div class="navigate">
  <RouterLink :to="{path:'/home'}" active-class="active">首页</RouterLink>
  <RouterLink :to="{path:'/new'}" active-class="active">新闻</RouterLink>
  <RouterLink :to="{path:'/about'}" active-class="active">关于</RouterLink>
</div>

（对象写法 name跳转）

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

7.路由命名

routes:[
    // 路由需要指明 路径和组件的对应关系 第一对路由关系
    {   
        name:'zhuye',
        path:'/home',
        component:route_home
    },
    // 第二对路由关系
    {
        name:'xinwen',
        path:'/new',
        component:route_new
    },
    // 第三对路由关系
    {
        name:'guanyu',
        path:'/about',
        component:route_about
    }
]

设置上路由命名以后，第6小节将路由 RouterLink组件中 to的两种写法，对象写法也可以写为

:to="{name:'zhuye'}"

8.嵌套路由和路由传参

8.1嵌套路由

{
    name: 'xinwen',
    path: '/new',
    component: route_new,
    children: [
        {   
            name: 'xaingqing',
            path: 'detail',
            component: new_detail,
        }
    ]
}

可以通过创建路由器里面，每个路由下存在参数children，实现路由嵌套

这里的新闻组件下又嵌套了一个新闻列表的组件，通过传递参数，实现不同新闻内容的呈现；

8.2路由传参

query传参（方法1）：

直接在需要传参的url后面写 “ ? ” ，问号后面跟传递的key=value，多个参数之间通过“ & ”连接，使用 ` 反演号在模板字符串里嵌入js，使用${};

<ul>
          <li v-for="item in newlist" :key="item.id">
            <RouterLink :to="`/new/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}</RouterLink>
          </li>
</ul>

组件调用传过来的参数：

import {useRoute} from "vue-router";

const route=useRoute()
console.log(route)

传过来的参数以键值对方式保存在 route['query'] 中，和route.query是等价的都可以用；

query传参（方法2）：

<ul>
    <li v-for="item in newlist" :key="item.id">
        <RouterLink
                :to="{
                  path:'/new/detail',
                  query:{
                    id:item.id,
                    title:item.title,
                    content:item.content
                  }
                }"
            >
              {{item.title}}
        </RouterLink>
    </li>
</ul>

使用路由 path跳转中，给to添加参数 query，这样直接将参数传递给子组件，组件接收时，也是通过上述方式接收；

param参数传参方法

在嵌套路由内需要指定传参的占位符：

// 第四对路由关系
{
    name: 'shiping',
    path: '/video',
    component: route_video,
    children: [
        {
            name: 'shiping_detail',
            path: 'video_detail/:id/:title/:content',  //params参数传参方法 占位
            component: video_detail,
        }
    ]
}

在组件内直接在routerlink中 to跳转的路由后面直接写 /需要传递参数的值 (方法一)：

<ul>
  <li v-for="item in newlist" :key="item.id">
    <!--    params传参方式        -->
    <RouterLink :to="`/video/video_detail/${item.id}/${item.title}/${item.content}`">
      {{item.title}}
    </RouterLink>
  </li>
</ul>

routerlink中to用name跳转（方法二）：

<RouterLink
                :to="{
                        name:'shiping_detail',
                        params:{
                          id:item.id,
                          title:item.title,
                          content:item.content
                        }
                }">
              {{ item.title }}
</RouterLink>

组件接收参数方式与query传参接收方法一样：

import {useRoute} from "vue-router";

const route = useRoute()
console.log(route.params)

（注意参数占位，占位参数若是可传可不传，则在参数后加个? 即可 params参数传递时不能传递数组）

9.路由的props配置

两种传参方式对应两种配置方法，都是在路由配置里面添加props：

query传参：

{
            name: 'xinwen',
            path: '/new',
            component: route_new,
            children: [
                {
                    path: 'detail',
                    component: new_detail,
                    //query参数写法：
                    props(route_info){
                        console.log(route_info)
                        return{
                            id:route_info['query']['id'],
                            title:route_info['query']['title'],
                            content:route_info['query']['content'],

                        }
                    }
                }
            ]
},

params传参：

{
            name: 'shiping',
            path: '/video',
            component: route_video,
            children: [
                {
                    name: 'shiping_detail',
                    path: 'video_detail/:id/:title/:content?',  //params参数传参方法 占位
                    component: video_detail,
                    // params参数写法： 将路由收到的所有params参数，作为props传给路由组件
                    props:true
                }
            ]
        }

在组件中接收参数：

defineProps(['id','title','content'])

10.路由的replac属性

在routerlink 组件上加上replace属性；

vue的两种历史记录：push和replace，默认为push模式，浏览器可以保留每次访问的记录进行前进后退，修改为replace模式后，只能保留当前界面，不能前进后退；

      <RouterLink replace :to="{path:'/home'}" active-class="active">首页</RouterLink>
      <RouterLink replace :to="{path:'/new'}" active-class="active">新闻</RouterLink>
      <RouterLink replace to="/video" active-class="active">视频</RouterLink>
      <RouterLink replace :to="{path:'/about'}" active-class="active">关于</RouterLink>

修改为replace模式后，不能后退和前进

11.编程式路由导航

routerlink实际上在页面展示的时候是a标签，但要想实现在脚本代码里面的路由跳转，则需要使用编程式路由导航，通过在脚本语言引入router（路由器），实现各个路由的自由切换：

在组件的script标签内引入router，使用router.push('/指定路由') 或者router.replace('/指定路由')，二者区别见10小结；

import {RouterView, RouterLink, useRouter} from "vue-router";
import {onMounted} from "vue";
let router=useRouter()


// 挂载一个3秒以后，跳转到新闻界面
onMounted(()=>{
  setTimeout(()=>{
    router.push('/new')
  },3000)
})

示例：

templa代码：

<!--    导航区     -->
      <div class="new_navigate">
        <ul>
          <li v-for="item in newlist" :key="item.id" class="li">
            <button @click="looknew(item)" class="but">查看新闻</button>
            <!-- query传参   第一种传参方式        -->
            <!--            <RouterLink :to="`/new/detail?id=${item.id}&title=${item.title}&content=${item.content}`">-->
            <!--              {{item.title}}-->
            <!--            </RouterLink>-->
            <!--  query传参  第二种传参方式        -->
            <RouterLink
                :to="{
                  path:'/new/detail',
                  query:{
                    id:item.id,
                    title:item.title,
                    content:item.content
                  }
                }"
            >
              {{ item.title }}
            </RouterLink>
          </li>
        </ul>
      </div>


script代码：
let router = useRouter()

interface itemInter{
  id:string,
  title:string,
  content:string
}

function looknew(item:itemInter) {
  router.push({
    path: '/new/detail',
    query: {
      id: item.id,
      title: item.title,
      content: item.content
    }
  })
}

使用编程式路由导航时，router.push() 跳转链接的写法和 routerlink的to属性完全一致，可以通过字符串跳转也可以通过对象跳转；

12.路由重定向

vue项目启动后，从 http://localhost:5173/ 跳转到 http://localhost:5173/home，在路由器里配置一下：

{
            path:'/',
            redirect:'/home'
}

标签：title,route,汇总,Vue3,组件,router,path,路由
From： https://blog.csdn.net/weixin_50845028/article/details/142029911

Vue3学习汇总（路由篇）

1.单一页面设计常用

2.理解 route（路由）和 router（路由器）

3.vue项目文件规范

3.1路由器位置

3.2路由组件位置

4.路由页面渲染原理

5.路由器工作模式

history模式

hash模式

6.路由 RouterLink组件中 to的两种写法

方法一：（字符串写法）

方法二：

（对象写法 path跳转）

（对象写法 name跳转）

7.路由命名

8.嵌套路由和路由传参

8.1嵌套路由

8.2路由传参

query传参（方法1）：

query传参（方法2）：

param参数传参方法

9.路由的props配置

10.路由的replac属性

11.编程式路由导航

12.路由重定向

相关文章

赞助商

阅读排行

Vue3学习汇总（路由篇）

1.单一页面设计常用

2.理解 route（路由） 和 router（路由器）

3.vue项目文件规范

3.1路由器位置

3.2路由组件位置

4.路由页面渲染原理

5.路由器工作模式

history模式

hash模式

6.路由 RouterLink组件中 to的两种写法

方法一：（字符串写法）

方法二：

（对象写法 path跳转 ）

（对象写法 name跳转 ）

7.路由命名

8.嵌套路由 和 路由传参

8.1嵌套路由

8.2路由传参

query传参（方法1）：

query传参（方法2）：

param参数传参方法

9.路由的props配置

10.路由的replac属性

11.编程式路由导航

12.路由重定向

相关文章

赞助商

阅读排行

2.理解 route（路由）和 router（路由器）

（对象写法 path跳转）

（对象写法 name跳转）

8.嵌套路由和路由传参