Vue3 路由（上）

路由器两种模式

1. history模式：

const router = CreateRouter({
  history:createWebHistory(), //history模式
})

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

2. hash模式：

const router = CreateRouter({
  history:createWebHashHistory(),  //hash模式
})

• 优点：兼容性更好，不需要服务器端处理路径
• 缺点：URL带有#不美观，但在SEO优化方面相对较差

to的两种写法

1. 字符串写法

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

2. 对象写法

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

命名路由

const router = createRouter({
    // 路由器的工作模式：history模式
    history: createWebHistory(),
    // 路由,一个一个的路由规则
    routes: [
        {
            name: 'zhuye'
            path: '/home',
            component: Home
        },
        {
            name: 'guanyu'
            path: '/about',
            component: About
        },
        {
            name: 'guanyu'
            path: '/news',
            component: News
        }
    ]
})

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

tips:还可以通过名字跳转

嵌套路由

1. 在index.ts中

const router = createRouter({
    // 路由器的工作模式：history模式
    history: createWebHistory(),
    // 路由,一个一个的路由规则
    routes: [
        {
            name:'zhuye',
            path: '/home',
            component: Home
        },
        {
            name:'guanyu',
            path: '/about',
            component: About
        },
        {
            name:'xinwen',
            path: '/news',
            component: News,
            children:[
                {
                    path:'detail',
                    component:Detail
                }
            ]
        }
    ]
})

tips:这里定义的path不用在前面添加/

2. 在的news.vue中

1. 在RouterLink中to属性中的路径要带上上一级的路径

query参数

1. 传递参数

• 第一种写法

<RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">
  {{news.title}}
</RouterLink>

tips:

1. :to：Vue 的 v-bind 语法简写形式，用于将 to 属性绑定到动态的值。to 指定了要跳转的路由目的地。在这个例子中，它使用的是 模板字符串 来动态构建 URL。
2. 模板字符串：使用反引号（``）包裹内容的字符串模板，可以通过 ${} 的方式将变量嵌入到字符串中。这里是通过模板字符串动态构造 URL。

• 第二种写法

       <Router-link
            :to="{
              name:'xiangxi',
              // path: '/news/detail',
              query:{
                id:news.id,
                title:news.title,
                content: news.content,
              }
            }">{{news.title}}</Router-link>

使用对象形式配置

2. 接受参数

<template>
  <ul class="news-list">
    <li>编号：{{query.id}}</li>
    <li>标题：{{query.title}}</li>
    <li>内容：{{query.content}}</li>
  </ul>
</template>

<script setup lang="ts" name="About">
import {useRoute} from "vue-router";
import {toRefs} from "vue";
// 接受query传的参数
let route = useRoute();
// 把传递过来的参数变成响应式对象
const {query} = toRefs(route);
</script>

tips：

1. 引入useRoute
2. route中的query对象中包含传递的参数

params参数

1. 在路由配置里面的路径要进行占位

2. 传递参数

• 第一种写法

 <!--2. params传参-->
 <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">
      {{news.title}}
 </RouterLink>

tips:

1. 与query传参不同的是，使用params传参时，不需用&分割参数，直接使用/
2. 同样需要使用模板字符串

• 第二种写法

<RouterLink
	:to="{
	name: 'xiangxi',
	params:{
	  id:news.id,
		title:news.title,
		content:news.content,
		}

}">{{news.title}}
	</RouterLink>

tips：

1. 不能使用path，使用name
2. 不能传递对象或数组
3. 占位有，但不传输的话，在占位时后面加？