vue3路由

一.对路由的理解及基本切换效果

理解

基本切换效果
目录

1.引入创建路由器并暴露，引入可能用到的路由组件 router/index.ts

// 创建一个路由器，并暴露出去
// 第一步：引入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

2.在main.ts中引用并使用路由器，

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

3.创建路由组件 components/xx.vue
4.在app.vue中的使用

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <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>

二.注意点

1.路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
2.路由组件：靠路由规则渲染出来的。route:[{path:/demo,component:demo}]
3.一般组件：亲手写出来的标签。

三.路由器工作模式

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

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

2.hash模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：URL带有#不太美观，且在SEO优化方面相对较差。

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

四.to的两种写法

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>

<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

五.命名路由

作用：可以简化路由跳转及传参
routes:[
{
name:‘zhuye’,
path:‘/home’,
component:Home
}]
跳转：

<!--简化前：需要写完整的路径（to的字符串写法） -->
<!--to写法(通过路径）-->
<router-link to="/news/detail">跳转</router-link>

<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<!--:to写法(通过名字）-->
<router-link :to="{name:'guanyu'}">跳转</router-link>
<!--:to写法(通过路径）-->
<router-link :to="{path:'/about'}">跳转</router-link>

六.嵌套路由

(编写News的子路由Detail)
1.配置路由规则

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

2.跳转路由时记得填写完整路径

<router-link to="/news/detail">xxxx</router-link>
<!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>

3.在News组件中预留一个

七.路由传参（query,params)

1,query
传递参数

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
				
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink 
  :to="{
    name:'xiang', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      content:news.title
    }
  }"
>
  {{news.title}}
</RouterLink>

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

2，params
注意点
传递params参数时，若使用to的对象写法，必须使用name配置项不能用path。
传递params参数时，需要提前在规则中占位。

传递参数

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
				
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink 
  :to="{
    name:'xiang', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      content:news.title
    }
  }"
>
  {{news.title}}
</RouterLink>

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

八.路由的props配置

作用：方便让路由组件接收到参数

{
	name:'xiang',
	path:'detail/:id/:title/:content',
	component:Detail,

  // props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
  // props:{a:1,b:2,c:3}, 

  // props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
  // props:true
  
  // props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
  props(route){
    return route.query
  }
}

九.replace/push属性(浏览器记录）

作用：控制路由跳转时操作浏览器历史记录的模式。

1.浏览器的历史记录有两种写入方式：push和replace
push是追加历史记录（默认值）。
replace是替换当前记录。
2.开启replace模式：
<RouterLink replace …>News

十.编程式导航及重定向

1.编程式导航:脱离routerlink实现路由跳转
路由组件的两个重要的属性：$route和$router变成了两个hooks

import {useRoute,useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()

console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

使用：
to怎么写，push和replace就可以怎么写
实现3s后跳转

实现点击按钮跳转

2.重定向redirect
可以实现打开后默认是谁
使用：

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